Cara Membuat Website Sederhana Dengan PHP dan MySQL

November 13, 2022

Buat kamu yang ingin belajar dan memahami bagaimana Cara Membuat Website Sederhana Dengan PHP dan MySQL bisa membaca artikel ini dari awal sampai akhir dan insyaAllah akan mendapatkan ilmu baru yang bermanfaat. Yang akan saya jelaskan pada artikel ini adalah membuat desain atau tampilan website yang sangat sederhana dan memungkinkan bagi pemula untuk paham dari awal pembuatan HTML dan CSS sampai dengan tampilan yang dihasilkan. Sebenarnya untuk bagian pertama ini kamu belum wajib menggunakan MySQL karena pada bagian pertama ini hanya akan focus ke tampilan dan fungsi drop down pada website, tapi nanti pada bagian selanjutnya pasti kudu wajib menggunakan mysql sebagai media pendukung dalam tutorial berikutnya, pastinya kamu mau kan adanya pengembangan dari website yang dibuat, nah maka dari itu jika belum menginstall xampp maka silahkan install terlebih dahulu. Siapkan konsentrasi dan baca satu per satu supaya dapat memahami apa fungsi dari setiap coding yang akan saya jelaskan, mungkin butuh memutar lagu untuk menemani dalam pembelajaran kali ini.

Cara Membuat Website Sederhana Dengan PHP dan MySQL

1. Pertama install xampp yang berfungsi sebagai server local, silakan download di internet serta cara installnya, atau bisa langsung menuju situs resminya XAMPP

2. Jalankan xampp kemudian aktifkan dengan mengklik start pada bagian Apache dan MySQL

3. Setelah berhasil terkoneksi maka langsung lari ke C:\xampp\htdocs

4. Buat folder dengan nama susantokun-website-1 (optional)

5. Buka Sublime atau media editor lainnya seperti Notepad, Notepad++, VSCode, Atom dan lain sebagainya

6. Ketikkan atau langsung copy code di bawah ini kemudian paste ke text editor

<!DOCTYPE html>
<html lang="en">

<?php
  //include 'connection.php';
?>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website #1 | SUSANTOKUN</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <header class="header">
    <h1>Website #1</h1>
    <p>Saat ini saya sedang belajar membuat website sederhana menggunakan PHP dan MySQL</p>
  </header>

  <nav class="navbar">
    <ul>
      <li class="utama"><a href="/web">Beranda</a></li>
      <li class="utama"><a href="index.php?web=form">Input Data</a></li>
      <li class="utama"><a href="index.php?web=view">Lihat Data</a></li>
      <li class="utama"><a href="#">Galery</a>
        <ul>
          <li><a href="">Kegiatan</a></li>
          <li><a href="">Foto Tampanku</a></li>
        </ul>
      </li>
      <li class="utama logout"><a href="#">Logout</a></li>
    </ul>
  </nav>

  <main class="main">

    <div class="content">
      <h2>TITLE 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio incidunt at doloremque reiciendis ea voluptas
        placeat architecto sequi! Corporis, doloribus, vero natus non magnam eligendi quisquam accusantium placeat
        tempora in provident! Possimus hic aperiam quo, modi dolorem et voluptatum, numquam, esse libero autem suscipit.
        Suscipit veniam iure magni doloremque numquam.</p>
      <br>
      <h2>TITLE 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio incidunt at doloremque reiciendis ea voluptas
        placeat architecto sequi! Corporis, doloribus, vero natus non magnam eligendi quisquam accusantium placeat
        tempora in provident! Possimus hic aperiam quo, modi dolorem et voluptatum, numquam, esse libero autem suscipit.
        Suscipit veniam iure magni doloremque numquam.</p>
    </div>
    
    <aside class="sidebar">
      <h2>Tentang</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus modi fugit repellendus ab alias
        blanditiis dignissimos ea provident, expedita porro.</p>
      <br>
      <h2>Berita Terkini</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus modi fugit repellendus ab alias
        blanditiis dignissimos ea provident, expedita porro.</p>
    </aside>
  </main>

  <footer class="footer">
    <p>Copyright &copy 2017 SUSANTOKUN</p>
  </footer>

</body>

</html>

view raw index.php hosted with

by GitHub

7. Simpan ke folder C:\xampp\htdocs\susantokun-website-1 yang telah dibuat pada nomor 4 dengan nama index dan format .php (index.php)

8. Buat file baru dan masukkan code dibawah ini

* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  margin-right: auto;
  margin-left: auto;
  max-width: 1024px;
  padding-right: 10px;
  padding-left: 10px;
}

.header {
  padding: 60px;
  text-align: center;
  background: #3498db;
  color: white;
}

.navbar {
  display: flex;
  background-color: #333;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar ul li.utama {
  display: inline-table;
}

.navbar ul li :hover {
  background-color: #2980b9;
}

.navbar ul li a {
  display: block;
  text-decoration: none;
  line-height: 40px;
  padding: 0 10px;
  color: #fff;
}

.utama ul {
  display: none;
  position: absolute;
  z-index: 2;
}

.utama:hover ul {
  display: block;
}

.utama ul li {
  display: block;
  background-color: #2980b9;
  width: 140px;
}

.main {
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid #3498db;
  border-right: 1px solid #3498db;
  border-bottom: 1px solid #3498db;
}

.content {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

.sidebar {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

.footer {
  padding: 1px;
  text-align: center;
  background: #ddd;
  border-left: 1px solid #3498db;
  border-right: 1px solid #3498db;
  border-bottom: 1px solid #3498db;
  font-size: 12px;
}

@media screen and (max-width: 768px) {
  .main,
  .navbar {
    flex-direction: column;
  }
}

view raw style.css hosted with

by GitHub

9. Simpan ke folder C:\xampp\htdocs\susantokun-website-1 dengan nama style dan format .css (style.css)

10. Buka http://localhost/susantokun-website-1/ atau susantokun-website-1.test

11. Lihat tampilannya apakah sama dengan gambar di bawah.

Itulah artikel cara membuat website sederhana dengan php dan mysql yang dapat saya sampaikan, semoga bermanfaat.

Cari Blog Ini

sihusein

Cara Membuat Website Sederhana Dengan PHP dan MySQL

Cara Membuat Website Sederhana Dengan PHP dan MySQL

Komentar

Postingan populer dari blog ini

project wesite pertamaku

CARA UNINSTAL PES 2013 YANG TIDAK BISA LEWAT CONTROL PANEL

Cara Membuka Kembali Tab Browser Yang Tertutup Tidak Sengaja

Tutorial langkah-Langkah Instalasi SmartPLS 3 Full Version

Perbedaan 32-Bit dan 64-Bit Serta Kekurangan dan Kelebihannya

Catatan - Basis Data #1

Resolusi 2024, Siapa yang mau berubah?

	<!DOCTYPE html>
	<html lang="en">

	<?php
	//include 'connection.php';
	?>

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Website #1 \| SUSANTOKUN</title>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>

	<header class="header">
	<h1>Website #1</h1>
	<p>Saat ini saya sedang belajar membuat website sederhana menggunakan PHP dan MySQL</p>
	</header>

	<nav class="navbar">
	<ul>
	<li class="utama"><a href="/web">Beranda</a></li>
	<li class="utama"><a href="index.php?web=form">Input Data</a></li>
	<li class="utama"><a href="index.php?web=view">Lihat Data</a></li>
	<li class="utama"><a href="#">Galery</a>
	<ul>
	<li><a href="">Kegiatan</a></li>
	<li><a href="">Foto Tampanku</a></li>
	</ul>
	</li>
	<li class="utama logout"><a href="#">Logout</a></li>
	</ul>
	</nav>

	<main class="main">

	<div class="content">
	<h2>TITLE 1</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio incidunt at doloremque reiciendis ea voluptas
	placeat architecto sequi! Corporis, doloribus, vero natus non magnam eligendi quisquam accusantium placeat
	tempora in provident! Possimus hic aperiam quo, modi dolorem et voluptatum, numquam, esse libero autem suscipit.
	Suscipit veniam iure magni doloremque numquam.</p>
	<br>
	<h2>TITLE 2</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio incidunt at doloremque reiciendis ea voluptas
	placeat architecto sequi! Corporis, doloribus, vero natus non magnam eligendi quisquam accusantium placeat
	tempora in provident! Possimus hic aperiam quo, modi dolorem et voluptatum, numquam, esse libero autem suscipit.
	Suscipit veniam iure magni doloremque numquam.</p>
	</div>

	<aside class="sidebar">
	<h2>Tentang</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus modi fugit repellendus ab alias
	blanditiis dignissimos ea provident, expedita porro.</p>
	<br>
	<h2>Berita Terkini</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus modi fugit repellendus ab alias
	blanditiis dignissimos ea provident, expedita porro.</p>
	</aside>
	</main>

	<footer class="footer">
	<p>Copyright &copy 2017 SUSANTOKUN</p>
	</footer>

	</body>

	</html>

	* {
	box-sizing: border-box;
	}

	body {
	font-family: Arial;
	margin-right: auto;
	margin-left: auto;
	max-width: 1024px;
	padding-right: 10px;
	padding-left: 10px;
	}

	.header {
	padding: 60px;
	text-align: center;
	background: #3498db;
	color: white;
	}

	.navbar {
	display: flex;
	background-color: #333;
	}

	.navbar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	.navbar ul li.utama {
	display: inline-table;
	}

	.navbar ul li :hover {
	background-color: #2980b9;
	}

	.navbar ul li a {
	display: block;
	text-decoration: none;
	line-height: 40px;
	padding: 0 10px;
	color: #fff;
	}

	.utama ul {
	display: none;
	position: absolute;
	z-index: 2;
	}

	.utama:hover ul {
	display: block;
	}

	.utama ul li {
	display: block;
	background-color: #2980b9;
	width: 140px;
	}

	.main {
	display: flex;
	flex-wrap: wrap;
	border-left: 1px solid #3498db;
	border-right: 1px solid #3498db;
	border-bottom: 1px solid #3498db;
	}

	.content {
	flex: 70%;
	background-color: white;
	padding: 20px;
	}

	.sidebar {
	flex: 30%;
	background-color: #f1f1f1;
	padding: 20px;
	}

	.footer {
	padding: 1px;
	text-align: center;
	background: #ddd;
	border-left: 1px solid #3498db;
	border-right: 1px solid #3498db;
	border-bottom: 1px solid #3498db;
	font-size: 12px;
	}

	@media screen and (max-width: 768px) {
	.main,
	.navbar {
	flex-direction: column;
	}
	}