Membuat Multi language sistem dengan php dan mysql bagian 1

Kali ini saya akan membagikan cara membuat website yang memiliki fasilitas multi language sistem dengan menggunakan bahasa pemograman php dan MySQL sebagai databasenya.

Daftar isi :

1. Pengenalan
2. Pembuatan database dan table di MySQL
3. Pembuatan file function.php, home.php, index.php, style.css
4. Penutup

 

1. PENGENALAN
Saat ini website sudah mengalami perkembangan yang sangat pesat sekali dan memiliki berbagai fitur seperti shoping cart, multi bahasa atau istilah kerennya multi language, downloder dan lainnya, khusus kali ini kita akan membahas satu fitur website yaitu multi bahasa atau multi language, disini kita akan coba membuat contoh sederhana website multi bahasa atau multi language dengan menggunakan PHP dan MySQL, ok kitang langsung aja yuk membuanya….

 

2. PEMBUATAN DATABASE DAN TABLE DI MySQL.

Disini saya asumsikan anda sudah punya server local dengan MySQLnya, disini saya menggunakan xampp, Sebelum membuta database dan tablenya kita aktifkan Xampp dan MySQLnya seperti gambar dibawah ini


Pertama kita membuat databasenya dahulu dengan perintah SQL sebagai berikut “CREATE DATABASE db_multilang;” disini kita akan membuat table yaitu :

2.1 Table tbl_lang

Table tbl_lang berfungsi untuk menyimpan data bahasa yg terdiri dari 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;

Lalu kita akan memasukan 2 data dulu, masukan query MySQL dibawah ini

INSERT INTO tbl_lang (lang_code, lang_name)
VALUES (‘id’, ‘Indonesia’),(‘en’, ‘English’);

 

2.2 Table tbl_post

Table tbl_post berfungsi untuk menyimpan data content dari berbagai bahasa yg terdiri dari 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;

Lalu kita coba masukan 2 data konten, masukan query MySQL dibawah ini :

INSERT INTO tbl_post (parent, lang_code, lang_post)
VALUES (‘0’, ‘id’, ‘Ini adalah konten dalam bahasa Indonesia’),(‘1”en’, ‘this is content in english.’);

 

3. PEMBUATAN FILE FUNCTION.PHP, INDEX.PHP, HOME.PHP, STYLE.CSS

3.1 Pembuatan function.php

File functions.php ini berisikan function-function untuk mengatur informasi yang ditampilkan di halaman website kita yang meliputi fungsi koneksi database. Berikut kodenya dan simpan dengan nama 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!');
    }
}
// Template header, feel free to customize this
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>&copy; $year, multi langugage System</p>
            </div>
        </footer>
        <script src="script.js"></script>
    </body>
</html>
EOT;
}
?>

3.2 Pembuatan index.php

copy kode dibawah ini dan simpan dengan nama 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 Pembuatan home.php

copy kode dibawah ini dan simpan dengan nama index.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 Pembuatan style.css

copy kode dibawah ini dan simpan dengan nama 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%;
}

Jika berhasil dan tanpa ada error akan muncul tampilan seperti gambar dibawah ini

4. PENUTUP

Anda bisa coba menganti konten dengan klik icon bendera yang ada disebelah pojok kanan atas, semoga bermanfaat

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *