Trang chủ PHP/HTML/CSS/JS Hướng dẫn tạo nhiều ngôn ngữ cho website

Hướng dẫn tạo nhiều ngôn ngữ cho website

bởi Vi Nè
254 lượt xem

Một trang web có hỗ trợ Đa ngôn ngữ sẽ thu hút được độc giả trên toàn thế giới. Nó hiển thị nội dung của nó bằng các ngôn ngữ khác nhau dựa trên lựa chọn của người dùng.

1. Giới thiệu

Có nhiều trang web sử dụng đa ngôn ngữ, có khi hỗ trợ hơn 50 ngôn ngữ, vì vậy việc chọn ngôn ngữ hỗ trợ cho trang web của bạn dựa trên nhiều yếu tố khác nhau. Hầu hết, nó phụ thuộc vào nội dung và đối tượng mà bạn đang viết.

Nếu bạn xác định tập trung chỉ ở Việt Nam, chúng ta có thể không cần tính năng này. Nhưng, bạn xác định thêm các đối tượng ngoài nước thì bạn nên thêm Tiếng Anh hoặc một số ngôn ngữ bản địa của họ.

2. Phần hướng dẫn

Bạn xem qua cấu trúc của nội dung hôm nay chúng ta sẽ làm:

Cây thư mục file

2.1. Phần SQL

Đây là tập lệnh SQL chứa cấu trúc bảng và dữ liệu bắt buộc. Tạo cơ sở dữ liệu database và nhập tập lệnh này vào đó. Ngoài ra bạn có thể lưu thành file .sql và import lên.

-- phpMyAdmin SQL Dump
-- version 5.1.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Sep 11, 2021 at 05:14 AM
-- Server version: 10.4.21-MariaDB
-- PHP Version: 7.3.30

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `multilanguage_1`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_newsletter`
--

CREATE TABLE `tbl_newsletter` (
  `id` int(11) NOT NULL,
  `vi_title` varchar(255) CHARACTER SET utf8 COLLATE utf8_vietnamese_ci NOT NULL,
  `vi_description` text CHARACTER SET utf8 COLLATE utf8_vietnamese_ci NOT NULL,
  `en_title` varchar(255) NOT NULL,
  `en_description` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_newsletter`
--

INSERT INTO `tbl_newsletter` (`id`, `vi_title`, `vi_description`, `en_title`, `en_description`) VALUES
(1, 'Hướng dẫn tạo Dark Mode cho website dễ dàng', 'Dark Mode là cái gì đó vô cùng hiện đại ở thời buổi bây giờ, thiết bị nào cũng có dark mode và website cũng phải có dark mode để giúp người đọc đỡ mỏi mắt khi dùng vào ban đêm.', 'Instructions to create Dark Mode for websites easily', 'Dark Mode is something very modern in this day and age, every device has a dark mode and the website must also have a dark mode to help readers reduce eye strain when used at night.'),
(2, 'Hướng dẫn quản lý CSDL và Keys trên Redis', 'Các lệnh hiển thị trong hướng dẫn này đã được thử nghiệm trên máy chủ Ubuntu 18.04 chạy Redis phiên bản 4.0.9. Để thiết lập một môi trường tương tự, bạn có thể làm theo Bước 1 trong hướng dẫn của tôi về Cách cài đặt và bảo mật Redis trên Ubuntu 18.04. Lưu ý rằng nếu bạn đang sử dụng Redis khác – ví dụ: Redli – thì kết quả của một số lệnh nhất định có thể khác nhau.', 'Instructions for managing databases and Keys on Redis', 'The screens shown in this tutorial have been tested on Ubuntu 18.04 server running Redis version 4.0.9. To set up an environment, you can be follow Step 1 in the guide of me about Redis Settings and security on Ubuntu 18.04. Note that if you are using another Redis - for example, Redli - the results of certain commands may differ.');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_newsletter`
--
ALTER TABLE `tbl_newsletter`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_newsletter`
--
ALTER TABLE `tbl_newsletter`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

2.2. Xây dựng trang PHP

Nội dung trang index.php: Base cho trang

<?php
// Lấy nội dung từ MySQL
namespace Phppot;

require_once ("./Model/NewsLetter.php");
use Phppot\DataSource;
$newsLetter = new NewsLetter();
$result = $newsLetter->getAllRecords();
?>
<?php
// thiết lập ngôn ngữ nền
$lang = "en";
if (isset($_GET['lang'])) {
    $lang = $_GET['lang'];
}
require_once ("./view/Language/lang." . $lang . ".php");
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Demo Sử dụng 02 ngôn ngữ trên PHP</title>
<link href='./assets/css/phppot-style.css' rel='stylesheet'
    type='text/css' />
<link href='./assets/css/multi-lingual-page.css' rel='stylesheet'
    type='text/css' />
</head>
<body>
    <div class="phppot-container">
		<?php require_once "./view/home.php"; ?>
		<?php require_once "./view/footer.php"; ?>
	</div>
</body>
</html>

Giải thích index.php, trong đó:

  • ./Model/NewsLetter.php là đường dẫn để lấy bài viết, thông tin từ SQL
  • ./view/Language/lang là đường dẫn đến thư mục ngôn ngữ
  • ./view/home.php là đường dẫn đến trang front-end
  • ./view/footer.php là đường dẫn đến trang footer

Nội dung trang home.php: Chứa phần hiển thị front-end

<div class="page-heading">
    <h1>Demo sử dụng 2 ngôn ngữ cho website PHP</h1>
</div>
<div class="language-header">
    <div class="demo-page-title"><?php echo $language["LIST_TITLE"]; ?></div>
    <div class="language-link">
        <a class="language-link-item" href="index.php?lang=vi"
            <?php if($lang == 'vi'){?> style="color: #ff9900;"
            <?php } ?>>Tiếng Việt</a> | <a class="language-link-item"
            href="index.php?lang=en" <?php if($lang == 'en'){?>
            style="color: #ff9900;" <?php } ?>>English</a>
    </div>
</div>
<?php
if (! empty($result)) {
    foreach ($result as $k => $v) {
        ?>
<div class="demo-row-data">
    <div>
        <strong><?php echo $result[$k][$lang.'_title']; ?></strong>
    </div>
    <p class="demo-row-description"><?php echo $result[$k][$lang.'_description']; ?>
    </p>
</div>
<?php
    }
} else {
    ?>
<div class="no-result"><?php echo $language["NOTIFY_NO_RESULT"]; ?></div>
<?php
}
?>

Giải thích home.php, trong đó:

  • LIST_TITLE và NOTIFY_NO_RESULT là tiêu đề trang, nó sẽ được hiển thị ở nhiều ngôn ngữ khác nhau.
  • $lang == ‘vi’ là lang code sẽ nằm bên thư mục lang, định dạng là vi.json
  • _title và _description là xác định các cột nằm trong SQL, ví dụ lang code là vi thì trong SQL có 2 cột là vi_title và vi_description

Nội dung trang DataSource.php trong ./lib/: Kết nối CSQL

const HOST = 'localhost';
const USERNAME = '';
const PASSWORD = '';
const DATABASENAME = '';
private $conn;

Này bạn nào chạy DEMO thì kết nối vào nhé.

3. Chốt

Mình đã hướng dẫn cách thêm hỗ trợ đa ngôn ngữ cho một trang web sử dụng PHP. Nếu bạn muốn hiển thị với nhiều ngôn ngữ hơn, hãy tạo các tệp ngôn ngữ tương ứng. Tệp ngôn ngữ bạn đã tạo phải chứa tên thích hợp với tiền tố. Mã này sẽ cung cấp cho bạn một nền tảng cơ sở để xây dựng một tính năng đa ngôn ngữ nâng cao.

Mình cung cấp cho bạn toàn bộ nội dung trên, nếu có thắc mắc liên hệ qua mục liên hệ để được giải đáp.

Tải về

Có thể bạn sẽ quan tâm

Bình luận