Table of contents :
- Introduction
- Creating databases and tables in MySQL
- Creating function.php, home.php, index.php, style.css
- Closing
1. INTRODUCTION
Currently the website has experienced very rapid development and has various features such as a shopping cart, multi language or the cool term multi language, downloader and others, specifically this time we will discuss one website feature, namely multi language or multi language, here we will try make a simple example of a multi-language or multi-language website using PHP and MySQL, ok let’s just go ahead and make it….
2. CREATING DATABASE AND TABLE IN MySQL.
Here I assume you already have a local server with MySQL, here I use xampp, Before blinding the database and table we activate Xampp and MySQL as shown below
First we create the database first with the following SQL command “CREATE DATABASE db_multilang;” Here we will create a table, namely:
2.1 Table tbl_lang
The tbl_lang table serves to store language data consisting of id, lang_code, lang_name
CREATE TABLE IF NOT EXISTS `tbl_lang` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`lang_code` varchar(10) NOT NULL,
`lang_name` varchar(100) NOT NULL,
PRIMARY KEY(`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
Then we will enter 2 data first, enter the MySQL query below
INSERT INTO tbl_lang(lang_code, lang_name)
VALUES(‘id’, ‘Indonesia’),(‘en’, ‘English’);
2.2 Table tbl_post
The tbl_post table functions to store content data from various languages consisting of id, lang_code, lang_post
CREATE TABLE IF NOT EXISTS `tbl_post` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`parent` INT NOT NULL,
`lang_code` varchar(10) NOT NULL,
`lang_post` varchar(100) NOT NULL,
PRIMARY KEY(`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
Then we try to input 2 content data, enter the MySQL query below:
INSERT INTO tbl_post(parent, lang_code, lang_post)
VALUES(‘0’, ‘id’, ‘This is content in Indonesian’),(‘1”en’, ‘this is content in english.’);
3. CREATING FUNCTION.PHP, INDEX.PHP, HOME.PHP, STYLE.CSS FILES
3.1 Creating function.php
This functions.php file contains functions to manage the information displayed on our website pages which includes the database connection function. Here’s the code and save it with the name functions.php
<?php
session_start();
$_SESSION['lang'] = 'NULL';
function pdo_connect_mysql() {
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'db_multilang';
try {
return new PDO('mysql:host=' . $DATABASE_HOST . ';dbname=' . $DATABASE_NAME . ';charset=utf8', $DATABASE_USER, $DATABASE_PASS);
} catch (PDOException $exception) {
exit('Failed to connect to database!');
}
}
function template_header($title) {
echo <<<EOT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multi language sistem dengan php dan MySQL</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>
<header>
<div class="content-wrapper">
<h1>Multi language sistem dengan php dan MySQL</h1>
<div class="link-icons">
<span><a href='index.php?lang=en'><img src='en.jpg'></a></span>
<span style="padding-left:7px;"></span>
<span><a href='index.php?lang=id'><img src='id.jpg'></a></span>
</div>
</div>
</header>
<main>
EOT;
}
function template_footer() {
$year = date('Y');
echo <<<EOT
</main>
<footer>
<div class="content-wrapper">
<p>© $year, multi langugage System</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
EOT;
}
?>3.2 Creating index.php
copy the code below and save it with the name index.php
<?php
include 'function.php';
$pdo = pdo_connect_mysql();
$page = isset($_GET['page']) && file_exists($_GET['page'] . '.php') ? $_GET['page'] : 'home';
include $page . '.php';
//echo "SELECT * FROM tbl_post where lang_code='$lang_active' ORDER BY id DESC LIMIT 1";
$stmt = $pdo->prepare("SELECT * FROM tbl_post where lang_code='$lang_active' ORDER BY id DESC LIMIT 1");
$stmt->execute();
$recently_added_products = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($recently_added_products as $data_content):
echo '<div style="margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;">'.$data_content['lang_post'].'</div>';
endforeach;
?>3.3 Creating home.php
copy the code below and save it with the name home.php
<?php
if (isset($_GET['lang']))
{
if ($_GET['lang'] == "en") {
//$a = include "language/english.php";
$lang_active='en';
}
else if ($_GET['lang'] == "id") {
//$a = include "language/indonesian.php";
$lang_active='id';
}
else {
$lang_active='id';
}
} else {
$lang_active='id';
}
$stmt = $pdo->prepare("SELECT * FROM tbl_post where lang_code='.$lang_active.' ORDER BY id DESC LIMIT 1");
$stmt->execute();
$recently_added_products = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<?=template_header('Home')?>
<?php
foreach ($recently_added_products as $data_content):
echo $data_content['lang_post'];
endforeach;
?>
<?=template_footer()?>3.4 Creating style.css
copy the code below and save it with the name style.css
* {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
color: #555555;
background-color: #FFFFFF;
margin: 0;
padding-bottom: 100px; /* Same height as footer */
}
h1, h2, h3, h4, h5 {
color: #394352;
}
.content-wrapper {
width: 1050px;
margin: 0 auto;
}
header {
border-bottom: 1px solid #EEEEEE;
}
header .content-wrapper {
display: flex;
}
header h1 {
display: flex;
flex-grow: 1;
flex-basis: 0;
font-size: 20px;
margin: 0;
padding: 24px 0;
}
header nav {
display: flex;
flex-grow: 1;
flex-basis: 0;
justify-content: center;
align-items: center;
}
header nav a {
text-decoration: none;
color: #555555;
padding: 10px 10px;
margin: 0 10px;
}
header nav a:hover {
border-bottom: 1px solid #aaa;
}
header .link-icons {
display: flex;
flex-grow: 1;
flex-basis: 0;
justify-content: flex-end;
align-items: center;
position: relative;
}
header .link-icons a {
text-decoration: none;
color: #394352;
padding: 0 10px;
}
header .link-icons a:hover {
color: #4e5c70;
}
header .link-icons a i {
font-size: 18px;
}
header .link-icons a span {
display: inline-block;
text-align: center;
background-color: #63748e;
border-radius: 50%;
color: #FFFFFF;
font-size: 12px;
line-height: 16px;
width: 16px;
height: 16px;
font-weight: bold;
position: absolute;
top: 22px;
right: 0;
}
main .featured {
display: flex;
flex-direction: column;
background-image: url(imgs/featured-image.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 500px;
align-items: center;
justify-content: center;
text-align: center;
}
main .featured h2 {
display: inline-block;
margin: 0;
width: 1050px;
font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;
font-size: 68px;
color: #FFFFFF;
padding-bottom: 10px;
}
main .featured p {
display: inline-block;
margin: 0;
width: 1050px;
font-size: 24px;
color: #FFFFFF;
}
main .recentlyadded h2 {
display: block;
font-weight: normal;
margin: 0;
padding: 40px 0;
font-size: 24px;
text-align: center;
width: 100%;
border-bottom: 1px solid #EEEEEE;
}
main .recentlyadded .products, main .products .products-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 40px 0 0 0;
}
main .recentlyadded .products .product, main .products .products-wrapper .product {
display: block;
overflow: hidden;
text-decoration: none;
width: 25%;
padding-bottom: 60px;
}
main .recentlyadded .products .product img, main .products .products-wrapper .product img {
transform: scale(1);
transition: transform 1s;
}
main .recentlyadded .products .product .name, main .products .products-wrapper .product .name {
display: block;
color: #555555;
padding: 20px 0 2px 0;
}
main .recentlyadded .products .product .price, main .products .products-wrapper .product .price {
display: block;
color: #999999;
}
main .recentlyadded .products .product .rrp, main .products .products-wrapper .product .rrp {
color: #BBBBBB;
text-decoration: line-through;
}
main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img {
transform: scale(1.05);
transition: transform 1s;
}
main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name {
text-decoration: underline;
}
main > .product {
display: flex;
padding: 40px 0;
}
main > .product > div {
padding-left: 15px;
}
main > .product h1 {
font-size: 34px;
font-weight: normal;
margin: 0;
padding: 20px 0 10px 0;
}
main > .product .price {
display: block;
font-size: 22px;
color: #999999;
}
main > .product .rrp {
color: #BBBBBB;
text-decoration: line-through;
font-size: 22px;
padding-left: 5px;
}
main > .product form {
display: flex;
flex-flow: column;
margin: 40px 0;
}
main > .product form input[type="number"] {
width: 400px;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
color: #555555;
border-radius: 5px;
}
main > .product form input[type="submit"] {
background: #4e5c70;
border: 0;
color: #FFFFFF;
width: 400px;
padding: 12px 0;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
}
main > .product form input[type="submit"]:hover {
background: #434f61;
}
main > .products h1 {
display: block;
font-weight: normal;
margin: 0;
padding: 40px 0;
font-size: 24px;
text-align: center;
width: 100%;
}
main > .products .buttons {
text-align: right;
padding-bottom: 40px;
}
main > .products .buttons a {
display: inline-block;
text-decoration: none;
margin-left: 5px;
padding: 12px 20px;
border: 0;
background: #4e5c70;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
border-radius: 5px;
}
main > .products .buttons a:hover {
background: #434f61;
}
main .cart h1 {
display: block;
font-weight: normal;
margin: 0;
padding: 40px 0;
font-size: 24px;
text-align: center;
width: 100%;
}
main .cart table {
width: 100%;
}
main .cart table thead td {
padding: 30px 0;
border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
text-align: right;
}
main .cart table tbody td {
padding: 20px 0;
border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
text-align: right;
}
main .cart table .img {
width: 80px;
}
main .cart table .remove {
color: #777777;
font-size: 12px;
padding-top: 3px;
}
main .cart table .remove:hover {
text-decoration: underline;
}
main .cart table .price {
color: #999999;
}
main .cart table a {
text-decoration: none;
color: #555555;
}
main .cart table input[type="number"] {
width: 68px;
padding: 10px;
border: 1px solid #ccc;
color: #555555;
border-radius: 5px;
}
main .cart .subtotal {
text-align: right;
padding: 40px 0;
}
main .cart .subtotal .text {
padding-right: 40px;
font-size: 18px;
}
main .cart .subtotal .price {
font-size: 18px;
color: #999999;
}
main .cart .buttons {
text-align: right;
padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
margin-left: 5px;
padding: 12px 20px;
border: 0;
background: #4e5c70;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
cursor: pointer;
border-radius: 5px;
}
main .cart .buttons input[type="submit"]:hover {
background: #434f61;
}
main .placeorder h1 {
display: block;
font-weight: normal;
margin: 0;
padding: 40px 0;
font-size: 24px;
text-align: center;
width: 100%;
}
main .placeorder p {
text-align: center;
}
footer {
position: absolute;
bottom: 0;
border-top: 1px solid #EEEEEE;
padding: 20px 0;
width: 100%;
}If successful and without any errors, a display like the image below will appear
4. CLOSING
You can try changing the content by clicking the flag icon in the upper right corner, for the CRUD (Create, Read, Update, Delete) system, we will discuss the data in part 2, okay?
Hope it is useful