PembuatanWebsiteDasar

UNIVERSITAS DUTA BANGSA SURAKARTA
September 2022
PEMGROGRAMAN WEB 2 – PRAKTEK 1

1. Struktur Dasar Website
2. Cara Membuat Website dengan PHP dari Awal
2.1. Langkah 1: Persiapan
2.2. Langkah 2: Membuat File index.php
2.3. Langkah 3: Membuat File style.css
2.4. Langkah 4: Membuat File home.php
2.5. Langkah 5: Membuat File about.php
2.6. Langkah 6: Membuat File aku.php
2.7. Langkah 7: Mencoba Website di Browser
1. Struktur Dasar Website

Secara umum, struktur dasar website adalah sebagai berikut:
1) Header - Terletak di bagian paling atas website dan biasanya memuat informasi
singkat seputar website, seperti logo, judul, dan tagline website.
2) Menu - Bagian website yang berfungsi sebagai jalan pintas menuju konten-konten
yang ada di website, sering juga disebut dengan navigasi.
3) Isi / Konten - Bagian utama pada website yang berisi artikel atau informasi yang
ingin disampaikan pemilik website kepada pengunjung.
4) Footer - Terletak di bagian paling bawah website dan biasanya terdiri dari
informasi pemilik website
2. Membuat Aplikasi berbasis Web

1) Persiapan Tool yang digunakan:
- PHP Editor - Digunakan untuk membuat file website dan menulis kodenya.
bisa menggunakan Notepad ++ atau Sublime Text.
- Web Browser - Berguna untuk mengecek tampilan website. Boleh
menggunakan Google Chrome.
- Web Server - Sebagai tempat untuk menyimpan folder website. Coba dipakai
XAMPP lalu membuat folder bernama aplikasi1 di D:\Xampp\Htdocs
1
September 2022
2) Membuat File index.php

<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Website dengan PHP | MyWeb </title>
<meta charset="UTF-8">
<meta name="description" contents="MyWeb.01">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<h1 class="title">MyWeb.01</h1>
<h3 class="desc">Membuat Website dengan PHPl</h3>
<nav id="navigation">
<ul>
<li><a href="index.php?page=home">Home</a></li>
<li><a href="index.php?page=about">About</a></li>
<li><a href="index.php?page=aku">aku</a></li>
</ul>
</nav>
</header>
<div id="contents">
<?php
if(isset($_GET['page'])){
$page = $_GET['page'];
switch ($page) {
case 'home':
include "home.php";
break;
case 'about':
include "about.php";
break;
case 'aku':
include "aku.php";
break;
}
}
else{
include "home.php";
}
?>
</div>
<footer>
&copy Copleft MyWeb.01 2021 | Indonesia Cemas Gas Melon Ilang dari peredaran
</footer>
</body>
</html>
Penjelasan kode di atas sebagai berikut:
<a href=” … ”</a> digunakan untuk memasukkan menu navigasi.

$_GET [„...‟] digunakan untuk memanggil method GET.
2
September 2022
Pada PHP, method GET berfungsi untuk mengambil data dari variabel ke halaman
lain. Untuk itu, diperlukan variabel baru bernama page.
Method GET nantinya akan memanggil isian data dari variabel page. Kemudian,
isian data tersebut akan ditampilkan sesuai dengan halaman menu yang dituju.
switch (...) {case „...‟} digunakan untuk berpindah-pindah halaman.

include “home.php”; digunakan untuk mengatur file home.php sebagai halaman
default.
3) Membuat File style.css

header h1.title,
header h3.desc{
text-align: center;
}
body {
width: 70%;
margin: auto;
}
a:link {
color: gray;
}
a:visited {
color: green;
}
a:hover {
color: rebeccapurple;
}
a:active {
color: teal;
}
#navigation {
}
p{
font-size: 110%;
color: black;
}
#contents {
float: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
font-family: sans-serif;
}
li {
float: left;
}
li a {
display: block;
3
September 2022
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #fff;
}
footer {
text-align: center;
}
4) Membuat File home.php

<div class="page">
<h2>Website Nyoba Biar lebih Yes </h2>
<p>Kami belajar dari sedikit demi sedikit Brooo. . . . .</p>
</div>
5) Membuat File about.php

<div class="page">
<h2>About Me</h2>
<p> Wong ajar nggak usah kemrungsung nggih.......</p>
</div>
6) Membuat file aku.php

<div class="page">
<h2>Indentitas saya</h2>
<p>Telp: 0271-7171717
<br>WA: 081394277053
<br>Hubungi Warung Web Ganas Boys
Gas Pol Rem Pol Kunci Stang</p>
<p>Fakultas Ilmu Komputer Universitas Duta Bangsa, Jl. Bhayangkara No.55, Tipes, Kec. Serengan,
Kota Surakarta, Jawa Tengah 57154 </p>
</div>
7) Mecoba Aplikasi di Browser

PembuatanWebsiteDasar

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

PembuatanWebsiteDasar

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIVERSITAS DUTA BANGSA SURAKARTA

PEMGROGRAMAN WEB 2 – PRAKTEK 1

1. Struktur Dasar Website

2. Membuat Aplikasi berbasis Web

2) Membuat File index.php

Penjelasan kode di atas sebagai berikut:

<a href=” … ”</a> digunakan untuk memasukkan menu navigasi.

switch (...) {case „...‟} digunakan untuk berpindah-pindah halaman.

3) Membuat File style.css

4) Membuat File home.php

5) Membuat File about.php

6) Membuat file aku.php

7) Mecoba Aplikasi di Browser

Anda mungkin juga menyukai