Cara membuat website dengan html + css + php

Question

Home » Belajar Membuat Website , CSS , HTML , MySQL , Perkuliahan , PHP , Programing » Membuat Website Sederhana dengan HTML, PHP, CSS dan MySQL

Table of Contents Show

Membuat Website Sederhana dengan HTML, PHP, CSS dan MySQL
Apa itu Website Dinamis ?
Membuat Website Dinamis Sederhana
Uji Coba Website dinamis PHP dan CSS
Langkah langkah membuat website HTML dan CSS?
Langkah Awal Membuat website dengan PHP?
Apakah PHP bisa membuat website?
Langkah langkah membuat website dengan HTML?

Membuat Website Sederhana dengan HTML, PHP, CSS dan MySQL

Rizki Wahyudi No comments

Materi berikut merupakan materi untuk pemula yang ingin mempelajari untuk Membuat Website Sederhana dengan HTML, PHP, CSS dan MySQL

Untuk Tahap Pertama pembuatan Template baca dan download materi Disini

Untuk Tahap kedua pembuatan Login, Upload berita dll baca dan download materi Disini

Untuk full Source Code Download Disini

Share:

Email ThisBlogThis!Share to TwitterShare to Facebook

Membuat website dinamis dengan PHP sangat menguntungkan ketika mempunyai banyak file PHP yang beraneka ragam.

Di dalam program PHP secara umum harus memanggil nama file php nya ketika ingin mengakses, hal ini akan menjadi static website dimana ketika membuat konten harus mengisi semua element yang di butuhkan.

Sebenarnya apa sih website dinamis itu ?

Daftar Isi

Apa itu Website Dinamis ?

Website dinamis adalah suatu halaman website yang memiliki konten berubah-ubah. Contohnya pada sebuah halaman website mempunyai :

Menu
Sidebar
dan Konten

3 tata letak di atas memiliki tempat yang berbeda dan konten dapat berubah-ubah sedangkan sidebar dan menu tetap sama.

Dengan PHP membuat website dinamis sederhana dapat menghemat penulisan kode sehingga pekerjaan akan lebih cepat.

Untuk membuat website dinamis dengan PHP dan Tag HTML dapat menggunakan perintah kondisi, seperti switch maupun if.. else.. .

Membuat Website Dinamis Sederhana

Ketika kita membuat website dinamis maka tidak perlu memanggil nama file PHP yang di tuju namun menggunakan sebuah varian parameter.

Kita dapat memanfaat kan keyword GET untuk memanggil nilai pada sebuah URL.

Langsung saja kita buat contoh latihan nya.

Silahkan buat 4 file PHP dan 1 file CSS yang bernama :

index.php
about.php
blog.php
style.css

beranda.php

<h3>Beranda Kodingin</h3>
<p>Ini merupakan halaman awal website dinamis Beranda</p>
<p>Website dinamis di bangun menggunakan PHP dan CSS</p>
<p>Terima kasih.</p>

about.php

<h3>About Kodingin</h3>
<img src="https://kodingin.com/wp-content/uploads/2019/08/g908.png" alt="">
<p>Ini merupakan halaman awal website dinamis About</p>
<p>Website dinamis di bangun menggunakan PHP dan CSS</p>
<p>Terima kasih.</p>

blog.php

<h3>Blog Kodingin</h3>
<p>Ini merupakan halaman awal website dinamis About</p>
<p>Website dinamis di bangun menggunakan PHP dan CSS</p>
<p>Terima kasih.</p>

style.css

body {
    background: purple;
    width: 500px;
    margin: 20px auto;
    color: white;
}

.header li {
    list-style: none;
    float: left;
    border: 1px solid white;
    margin-right: 5px;
    border-radius: 3px;
}

.header a {
    text-decoration: none;
    color: white;
    padding: 15px;
    margin: 2px;
    font-size: 20px;
}

.header,
.content,
.footer {
    width: 600px;
    overflow: hidden;
    margin: 10px;
}

.content {
    border: 1px solid white;
    padding: 10px;
    border-radius: 3px;
}

.footer a {
    text-decoration: none;
    color: rgb(190, 188, 188);
    font-weight: 100;
}

index.php

<html>

<head>
    <title>Cara membuat Website dinamis dengan PHP dan CSS</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section class="header">
        <li><a href="index.php?page=beranda">Home</a></li>
        <li><a href="index.php?page=about">About</a></li>
        <li><a href="index.php?page=blog">Blog</a></li>
    </section>
    <section class="content">
        <?php
        if (isset($_GET['page'])) {
            if ($_GET['page'] == "about") {
                include "about.php";
            } elseif ($_GET['page'] == "blog") {
                include "blog.php";
            } else {
                include "beranda.php";
            }
        } else {
            include "beranda.php";
        }
        ?>
    </section>
    <section class="footer">
        Link tutorial :
        <a href="https://kodingin.com/cara-membuat-website-dinamis-dengan-php-dan-css">
            Cara membuat Website Dinamis dengan PHP dan CSS
        </a>
    </section>
</body>

</html>

Perhatikan kode yang ada pada index.php. Terdapat 3 bentuk section yaitu :

heeader
content
footer

Dimana header dan footer langsung di tuliskan di dalam file index.php.

Sedangkan pada bagian class content terdapat perintah if else untuk memeriksa hasil dari parameter URL.

Untuk menambil nilai parameter pada program PHP menggunakan perintah $_GET[‘page’], artinya ketika ada url dengan bentuk ?page={value} maka akan menghasilkan nilai yang ada.

Perintah isset digunakan untuk memeriksa apakah ada parameter page. Apabila ada di proses dengan perintah terhadap isinya.

Dalam contoh di atas menggunakan keyword include untuk memanggil file lainnya.

Apabila tidak ada parameter page maka akan di melakukan include file dengan nama “beranda.php“

Di dalam index.php terdapat link menu dinamis untuk mengarahkan ke dalam parameter yang ada.

Sebagai contoh ketika terdapat URL index.php?page=about, maka akan mengincludkan file about.php

Sedangkan file CSS di atas digunakan agar tampilan website dinamis lebih menarik.

Sekarang kita lakukan uji coba.

Uji Coba Website dinamis PHP dan CSS

Silahkan buka sesesui dengan nama projek yang di buat :

contohnya : http://localhost/kodingin_tutorial/php-dinamis/

Sekarang silahkan klik menu about, atau langsung membuka URL contoh : http://localhost/kodingin_tutorial/php-dinamis/index.php?page=about.

Sekarang klik menu blog atau buka URL contoh : http://localhost/kodingin_tutorial/php-dinamis/index.php?page=blog

Perhatikan gambar di atas, terdapat menu dengan isi : home, about dan blog. Di mana tampilan menu tidak akan berubah.

Baca Juga : Menggunakan Warna CSS pada tag HTML

Sedangkan pada kotakan warna putih yang merupakan suatu konten berubah-ubah sesuai URL yang di akses.

Langkah langkah membuat website HTML dan CSS?

Membuat Website Menggunakan HTML dan CSS.

Membuat wireframe / kerangka website. Langkah yang pertama ini adalah membuat wireframe. ... .

Menginstal text editor. Langkah kedua inilah yang paling penting. ... .

Membuat folder baru. ... .

Membuat file index. ... .

Membuat file style. ... .

6. Hubungkan file css dengan file html..

Langkah Awal Membuat website dengan PHP?

Nah, cara membuat website dengan PHP dari awal bisa dilakukan dengan langkah berikut:.

Mempersiapkan software yang digunakan..

Membuat file index. php..

Membuat file style.css..

Membuat file home.php..

Membuat file about. php..

Membuat file contact.php..

Mencoba website di browser..

Apakah PHP bisa membuat website?

PHP adalah bahasa penulisan skrip sisi server yang memiliki berbagai kegunaan, tapi yang paling umum adalah untuk membuat konten website yang dinamis. Selain itu, PHP sangat populer karena sifatnya yang open-source dan serbaguna.