ฝึกเขียน code บันทึกข้อมูลนักเรียน

บทความนี้เป็นการหาความรู้จากแหล่งเปิด Open Source เพื่อฝึกฝนตนเองในการเขียน Code ภาษา โดยจะใช้บริการของ Google Sheet เป็นฐานข้อมูล และ ใช้ภาษา App Script ในการเขียน

ขั้นตอนแรก ให้เราไปที่ google Sheet ของเรา แล้วสร้าง ไฟล์ใหม่ขึ้นมา ตั้งชื่อว่า Test Form

สำหรับการฝึกฝนตามตัวอย่าง จะมีแค่ 2 คอลัมน์คือ Name กับ Date

บนเมนูบาร์ให้เราไปที่คำสั่ง ส่วนขยาย หรือ extension แล้วคลิก app script

จะได้ไฟล์ชื่อว่า รหัส.gs ให้เราฝึกเขียน code หรือ จะcopy ไปวางก็ได้

function AddRecord(name) {
  
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var mainSheet = ss.getSheetByName("MAIN");
  mainSheet.appendRow([name, new Date()]);
  
}

function startForm()
{
 var form = HtmlService.createHtmlOutputFromFile('AddForm');
 SpreadsheetApp.getUi().showModalDialog(form, 'Add Record');
  
  
}

function addMenu()
{
 var menu = SpreadsheetApp.getUi().createMenu('Custom');
 menu.addItem('Add Record Form', 'startForm');
 menu.addToUi();
  
}

function onOpen(e)
{
  
 addMenu(); 
}

ในไฟล์จะมี 3 ส่วนหลักๆ คือส่วนที่เชื่อมต่อกับตารางฐานข้อมูล google sheet

ส่วนที่เรียกใช้งานแบบฟอร์ม html ในการกรอกข้อมูล

และส่วนที่เพิ่มเมนูในการเพิ่มข้อมูล Name

ขั้นตอนต่อมา ให้เราสร้างไฟล์สำหรับผู้ใช้งาน กรอกข้อมูล name เข้ามา

กำหนดชื่อไฟล์เป็น AddForm.html

จะเขียน code ที่ละบรรทัด หรือจะ copy วางก็ตามสะดวกและถนัด

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
    function AddRow()
    {
    var name = document.getElementById("name").value;
    google.script.run.AddRecord(name);
    }
    </script>
  </head>
  <body>
    Name:  <input type="text" id="name" />
    <input type="button" value="Add" onclick="AddRow()" />
  </body>
</html>

อธิบาย Code ในส่วนนี้ จะมีช่องให้กรอกชื่อ และปุ่ม Add เพื่อเพิ่มข้อมูล

ส่วนที่ 2 จะอาศัยภาษา java script ในการทำงานร่วมกัน โดยชุดคำสั่งดังกล่าวจะอยู่ในแท็ก

<script> </script>

เมื่อผู้ใช้งานคลิกปุ่ม add จะเรียนใช้งานฟังก์ชั่น ที่ชื่อว่า AddRow

สำหรับคอลัมน์ date วันที่ จะเป็นอัตโนมัติของ google sheet ก็ว่าได้

ขั้นตอนการทดสอบการทำงานของไฟล์

กลับมาที่ไฟล์ google sheet แล้วกด refresh จะมีเมนูบาร์ custom เพิ่มขึ้นมา ให้คลิกเลือกใช้งานฟังก์ชั่นในการเพิ่มข้อมูล

ทดสอบกรอกข้อมูล name เข้าไปตามตัวอย่าง

ฝึกเขียน Google Apps Script แรก

App script เป็น Code ภาษาคอมพิวเตอร์ ที่น่าสนใจและนำมาพัฒนาปรับปรุงรูปแบบการทำงานของบุคคล หรือองค์กรได้อย่างน่าสนใจและมีประสิทธิภาพ

สำหรับมือใหม่หรือผู้เริ่มต้นศึกษา อยากจะลองเขียน Code แรกด้วยตนเอง

ขั้นตอนแรก ให้ไปสร้างไฟล์ google sheet ขึ้นมา ตั้งชื่อเป็น test01 ก็ได้

ในหน้าต่าง editor ของโปรแกรม จะมี

จะมีข้อมูลโครงสร้างภาษา เป็น myfunction

ให้ทดสอบพิมพ์ Browser.msgBox("Hello World!");

เข้าไปในหน้าต่างโปรแกรม

การบันทึกและ ไอค่อนรูป disk และคลิกปุ่มคำสั่ง เรียกใช้

อาจจะต้องยินยอมเงื่อนไขการรักษาความปลอดภัย ตรวจสอบสิทธิ์ และอนุญาตการเข้าใช้งานตามบัญชี gmail ของผู้ใช้งาน

ควรจะได้ข้อความผลการทำงานบนหน้าต่างตามภาพ

ดาวโหลดและติดตั้ง Flutter

สำหรับท่านที่สนใจสร้างหรือพัฒนาแอพพลิเคชั่นใช้งาน ต่างๆ ผมอยากจะแนะนำให้ลองศึกษาและใช้งาน Flutter ในการทำงาน เพราะเป็นโปรแกรมที่ช่วยในการสร้างแอพออกมาใช้งานกับมือถือทั้งแบบ iOS และ Android เรียกว่าสร้างแอพเดียวสามารถใช้งานได้ทั้งสองค่ายเลยทีเดียว

ขั้นตอนการดาวโหลดและติดตั้ง ไปที่ลิงค์ install Flutter เพื่อเลือกดาวโหลดไฟล์ติดตั้ง

เลือกระบบปฏิบัติการตามที่ต้องการ

Windows

macOS

Linux

Chrome

ในการสร้างแอพด้วย Flutter สามารถเลือกโปรแกรมสำหรับการเขียนโค้ดอย่าง VSC หรือ Android Studio ได้

จากนั้นจะเป็นการ test drive หรือการทดสอบความพร้อมในการสร้างแอพด้วย flutter

เมื่อทุกส่วนพร้อมก็จะเริ่มต้นสร้างแอพแรกด้วย Flutter กัน โดยจะเริ่มจากง่ายไปหายาก ตามลำดับ

ภาพรวมๆ Overview สู่การพัฒนาฐานข้อมูลบนเว็บด้วยตนเอง

แนวความคิดการพัฒนาฐานข้อมูลด้วยภาษา PHP และ MYSQL

เพราะว่าเป็นฟรีแวร์ และมีการใช้งานโดยหลายระบบเช่น Facebook เป็นต้น

สำหรับผู้เริ่มต้นศึกษา และเรียนรู้การทำงาน จะต้องมีพื้นฐานด้าน คอมพิวเตอร์เครือข่าย Network และระบบปฏิบัติการเช่น Linux OS หรือ Windows เป็นต้น

การสื่อสารข้อมูลผ่านระบบเครือข่ายคอมพิวเตอร์ภายในองค์กร หรือระหว่างองค์กร Fiber Optic Network for instance

การดาวโหลดและติดตั้งแม่ข่ายจำลอง Web Service เช่น XAMPP ,APACHE2 เป็นต้น

https://www.apachefriends.org/download.html

การดาวโหลดติดตั้งโปรแกรม Coding Editor แนะนำเป็นโปรแกรม VSC

https://code.visualstudio.com/download

การออกแบบและสร้างตารางฐานข้อมูล

การสร้างไฟล์สำหรับการ Connect หรือเชื่อมต่อฐานข้อมูลหรือ Database

การสร้างแบบฟอร์มสำหรับให้ผู้ใช้งาน user กรอกข้อมูลเข้ามา

การตกแต่งฟอร์มโดยใช้คำสั่งจัดเรียงข้อมูลและตกแต่งแบบฟอร์มช่วยอย่าง Bootstarp เป็นต้น

การศึกษาการประกาศค่าตัวแปรภาษา PHP การศึกษาและเรียนรู้คำสั่งโครงสร้างภาษา PHP Syntax

ขั้นตอน 2 การต่อยอดสู้การเขียนแอพเพื่อเชื่อมต่อระบบ SQL Databace โดยต้องศึกษาการเขียนประตูเชื่อมระหว่าง PHP MYADMIN กับ แอพพลิเคชั่นบน SmartPhone เช่น Node Js ,Flutter เป็นต้น

VPN Gate Client Plug-in with SoftEther VPN Client

โปรแกรมสำหรับการดาวโหลดตืดตั้ง เพื่อใช้งานด้านการรักษาความปลอดภัยข้อมูลผ่านเครือข่ายอินเตอร์เน็ต

คุณสมบัติและขีดความสามารถ

ติดตั้งบนคอมพิวเตอร์ PC เพื่อจำลองเครือข่ายส่วนตัว Private ในการรับหรือส่งข้อมูลที่ต้องการปกปิด หรือสาธารณะ

สามารถดาวโหลดและติดตั้งใช้งานฟรี โดยไม่มีค่าใช้จ่าย ไม่ต้องลงทะเบียนผู้ใช้งาน สำหรับการศึกษารายละเอียดเพิ่มเติม สามารถดูได้ที่ http://www.vpngate.net/en/

VPN Gate is free of charge. No user registrations required. For more about VPN Gate, please visit http://www.vpngate.net/en/

ออกแบบและพัฒนาให้บริการระบบโดย Graduate School of University of Tsukuba, Japan.

ข้อดี 3 ข้อ คือ

เข้าดูเว็บไซต์ที่โดนบล็อกไว้ได้

ท่องเน็ตโดยพราง IP ของเครื่อง

ปกป้องเครือข่าย WI-Fi จากการบุกรุก

ดาวโหลดได้จากลิงค์ : VPN Gate Client

ฝึกเขียนภาษา PHP ระบบลงทะเบียนข้อมูลและ Login

ให้ดาวโหลดและติดตั้ง XAMPP เพื่อใช้งานกับภาษา PHP scripts. ลิงค์สำหรับดาวโหลด XAMPP server https://www.apachefriends.org/index.html. เปิดหน้าต่างควบคุม XAMPP's Cและเรียกใช้งาน `Apacheกับ กับ` `MySQL`. รวมทั้ง Bootstrap โดยไปที่ลิค์ https://getbootstrap.com/ .

สร้างฐานข้อมูล

เปิดไปที่ [i.e. http://localhost/phpmyadmin] สร้างฐานข้อมูล db_login.

สร้างตารางขึ้นมาเก็บข้อมูล โดยแท็บ SQL copy/paste ตามตัวอย่างด้านล่าง . คลิกปุ่มคำสั่ง Go เพื่อสร้างตาราง.

CREATE TABLE `member` (
`mem_id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`firstname` varchar(50) NOT NULL,
`lastname` varchar(50) NOT NULL,
`username` varchar(30) NOT NULL,
`password` varchar(12) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

สร้างไฟล์ชื่อ con.php เพื่อเชื่อมต่อกับฐานข้อมูล

<?php
$db_username = 'root';
$db_password = '';
$conn = new PDO( 'mysql:host=localhost;dbname=db_login', $db_username, $db_password );
if(!$conn){
die("Fatal Error: Connection Failed!");
}
?>

สร้างไฟล์ index.php เพื่อเป็นหน้าแบบฟอร์ม สำหรับการ Login

<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">PHP - PDO Login and Registration</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-2"></div>
<div class="col-md-8">
<?php if(isset($_SESSION['message'])): ?>
<div class="alert alert-<?php echo $_SESSION['message']['alert'] ?> msg"><?php echo $_SESSION['message']['text'] ?></div>
<script>
(function() {
// removing the message 3 seconds after the page load
setTimeout(function(){
document.querySelector('.msg').remove();
},3000)
})();
</script>
<?php
endif;
// clearing the message
unset($_SESSION['message']);
?>
<form action="login_query.php" method="POST">
<h4 class="text-success">Login here...</h4>
<hr style="border-top:1px groovy #000;">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" />
</div>
<br />
<div class="form-group">
<button class="btn btn-primary form-control" name="login">Login</button>
</div>
<a href="registration.php">Registration</a>
</form>
</div>
</div>
</body>
</html>

สร้างไฟล์ลงทะเบียนผู้ใช้งาน register_query.php

<?php
session_start();
require_once 'conn.php';
if(ISSET($_POST['register'])){
if($_POST['firstname'] != "" || $_POST['username'] != "" || $_POST['password'] != ""){
try{
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$username = $_POST['username'];
// md5 encrypted
// $password = md5($_POST['password']);
$password = $_POST['password'];
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "INSERT INTO `member` VALUES ('', '$firstname', '$lastname', '$username', '$password')";
$conn->exec($sql);
}catch(PDOException $e){
echo $e->getMessage();
}
$_SESSION['message']=array("text"=>"User successfully created.","alert"=>"info");
$conn = null;
header('location:index.php');
}else{
echo "
<script>alert('Please fill up the required field!')</script>
<script>window.location = 'registration.php'</script>
";
}
}
?>

สร้างไฟล์ทำหน้าที่ตรวจสอบในฐานข้อมูลว่ามีชื่อผู้ใช้งานในระบบหรือไม เพื่อให้สิทธิในการ Login

<?php
session_start();
require_once 'conn.php';
if(ISSET($_POST['login'])){
if($_POST['username'] != "" || $_POST['password'] != ""){
$username = $_POST['username'];
$password = $_POST['password'];
$sql = "SELECT * FROM `member` WHERE `username`=? AND `password`=? ";
$query = $conn->prepare($sql);
$query->execute(array($username,$password));
$row = $query->rowCount();
$fetch = $query->fetch();
if($row > 0) {
$_SESSION['user'] = $fetch['mem_id'];
header("location: home.php");
} else{
echo "
<script>alert('Invalid username or password')</script>
<script>window.location = 'index.php'</script>
";
}
}else{
echo "
<script>alert('Please complete the required field!')</script>
<script>window.location = 'index.php'</script>
";
}
}
?>

สร้างไฟล์ Logout.php เพื่อ จบการทำงาน

<?php
session_start();
session_destroy();
header('location: index.php');
?>