>>Buổi học lập trình web dành cho các bạn đăng ký du học ngành IT/media tại Nhật
Chúng ta sẽ làm một trang tra từ điển như trang Yurica Dictionary.
Chúng ta sẽ làm một trang tra từ điển như trang Yurica Dictionary.
Đầu tiên chế một file index.html ví dụ trong thư mục /dic trên localhost của bạn:
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Yurica Dictionary</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
<div class="wrapper" style="text-align:center;">
<img src="img/logo.png" alt="logo"><br /><br />
<form action="look.php">
<input type="text" name="mylook" size="50"><br><br>
<input type="submit" value="Look Up">
</form>
<br>
<br><span style="font-family:arial;">Phương Mai Từ Điển</span> 芳梅辞典 ★ ユリカ辞書 Yurica Jisho. Beta Version
</div>
</div>
</body>
</html>
Nội dung file style.css chỉ để căn chỉnh cho đẹp:
html, body {Hoặc bạn có thể định nghĩa đoạn trên trong thẻ <style></style> ngay trong file HTML.
height: 100%;
font-family: "Arial", Courier, Serif, Meiryo, メイリオ, MS Mincho, ＭＳ 明朝;
}
.main {
height: 100%;
width: 100%;
display: table;
}
.wrapper {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.searchbody {
margin-left: 150px;
}
Lập trình từ điển
Lập trình file look.php bằng ngôn ngữ PHP.Bạn cần login vào myPhpAdmin của server để tạo cơ sở dữ liệu (DB), ví dụ TESTDB.
Server: localhost
Name: testdb
User: testdb
Password: dbpass
Sau đó trong DB này tạo bảng ví dụ TEST. Bảng này gồm 3 trường là ID (khóa chính PRIMARY, đánh số tự động), English, Vietnamese (giả sử làm từ điển Anh Việt) bằng panel hoặc câu lệnh:
CREATE TABLE test (ID INT NOT NULL AUTO_INCREMENT, English varchar(50) CHARACTER SET utf8 COLLATE utf8_unicode_ci, Vietnamese varchar(50) CHARACTER SET utf8 COLLATE utf8_unicode_ci, PRIMARY KEY (`ID`));
Sau đó chúng ta thêm vài bản ghi vào để ví dụ:
INSERT INTO `test`(`English`,`Vietnamese`) VALUES ('student', 'học sinh');
INSERT INTO `test`(`English`,`Vietnamese`) VALUES ('teacher', 'giáo viên');
INSERT INTO `test`(`English`,`Vietnamese`) VALUES ('school', 'trường học');
Giờ bảng đã có 3 bản ghi. Giờ chúng ta sẽ lập trình trong file look.php.
<?php
$servername = "localhost";
$username = "testdb";
$password = "dbpass";
$dbname = "testdb";
$mylook = $_GET['mylook'];
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM test WHERE English='".$mylook."'";
$result = $conn->query($sql);
$conn->close();
$html = "";
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$headline = $row["English"];
$html .= "<h2>".$headline."</h2>\n";
$html .= "Ý nghĩa: ".$row["Vietnamese"]."<br>\n";
}
} else {
$html .= "<span style=\"font-family:helvetica;font-size: 200%;\">NOT FOUND.</span> Try <a href=\"https://www.google.com/#q=".$mylook."とは\" target='_blank'>Google</a>↗"
."<br><br><span style=\"font-family:arial;color:lightblue;\">Cứ đi sẽ đến. Cứ tìm sẽ thấy. Cứ gõ cửa sẽ mở. Cứ mơ mộng sẽ thành hiện thực.<br>行けば着く。探せば見つかる。ドアを叩けば開く。夢見れば叶う。</span>\n";
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Yurica Dictionary</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<script>
function myFunction_towa() {
var x = document.getElementsByName("mylook")[0].value;
var url = "https://www.google.com/#q=" + x + "とは";
window.open(url,'_blank');
}
</script>
<body>
<div class="main">
<a href="/"><img src="img/logo.png" alt="logo"></a><br /><br />
<div class="searchbody">
<form action="look.php">
<input type="text" name="mylook" size="60" value="<?php print $_GET['mylook']; ?>"> <input type="submit" value="Look Up">
</form>
<br>
<?php print $html; ?>
<br><br><span style="font-family:arial;color:lightcoral;">Phương Mai Từ Điển 芳梅辞典 ★ ユリカ辞書 Yurica Jisho. Beta Version</span>
</div>
</div>
</body>
</html>
SQL Injection
Nội dung lỗi: ' or ''=' hoặc x' or 1=1Xóa luôn bảng: x'; DROP TABLE test;
Chỉ xóa nội dung không xóa bảng: TRUNCATE TABLE test;
Bổ sung: Cách tạo cơ sở dữ liệu và tạo user truy cập bằng phpMyAdmin trong XAMP
Mở cửa sổ XAMP ẩn vào Admin của MySQL:
phpMyAdmin sẽ mở trong trình duyệt (Chrome vv):
Cột bên trái nhấp "New" để thêm database mới đặt tên "testdb":
Bạn nên chọn Collation là utf8mb4_unicode_ci để hiện ký tự Unicode như tiếng Việt và tiếng Nhật cho chuẩn. Sau đó database "testdb" sẽ xuất hiện ở cột bên trái, chọn DB này và bạn có thể tạo các bảng (table) để lưu trữ dữ liệu.
Để truy cập DB này từ php thì phải tạo user cho DB:
Bước 1: Chọn DB "testdb" ở cột bên trái.
Bước 2: Ở tab trên chọn Privileges sẽ thấy Add user account:
Ví dụ User name = testdb (lấy trùng tên DB, lấy khác cũng được), Host name = localhost (máy của bạn) <= nếu chọn máy là "Local" ở danh sách thả xuống thì localhost sẽ tự động điền, Password = ví dụ dbpass (như trong bài),Re-type = gõ lại dbpass.
Sau khi nhập xong ấn nút "Go" (Thực hiện) ở bên dưới.
Tất nhiên là trong testdb bạn hãy tạo bảng như trong bài nhé.
No comments:
Post a Comment