Cara menggunakan php web design

Question

Dalam membuat sebuah situs web, tampilan memang merupakan hal penting yang perlu diperhatikan. Namun, penting juga untuk membuat situs web Anda dapat diakses oleh semua pengguna. Kebanyakan orang menggunakan komputer untuk mengakses sebuah situs web, sekarang dengan berkembangnya teknologi khususnya smartphone, membuat situs web dapat diakses dengan mudah menggunakan ponsel dan tablet mereka. Jika Anda merupakan seorang programmer, maka sangat penting untuk membuat situs web Anda dapat terlihat dan berfungsi dengan baik pada perangkat-perangkat tersebut.

Table of Contents Show

Membuat Situs Web Menggunakan PHP
Membuat Website Blog Menggunakan PHP MySQL
Halaman Home Website Blog ( index.php)
Mengkoneksikan ke Database (func.php)
Header Website Untuk Admin Page (header.php)
Membuat Detail Artikel (detail.php)
Membuat Admin Page
Membuat Halaman Admin (admin.php)
Membuat Halaman Add Artikel (add.php)
Membuat Folder img untuk gambar
Langkah langkah membuat web dengan PHP?
Apakah PHP bisa membuat website?
Website apa saja yang menggunakan PHP?
Bagaimana fungsi PHP pada sebuah website?

Membuat Situs Web Menggunakan PHP

Perlu Anda ketahui bahwa PHP diproses di server, adapun kode yang sampai ke pengguna hanya HTML. Adapun proses mendapatkan sebuah situs web dimulai dari pengguna yang meminta halaman situs Anda dari server, kemudian server akan menjalankan semua programan PHP, setelah itu mengirimkan kepada pengguna hasil PHP tersebut.

Sebenarnya perangkat yang Anda gunakan tidak dapat melakukan hal apapun dengan kode PHP tersebut. Inilah keuntungan yang didapatkan oleh seorang programmer jika menggunakan PHP dibandingkan dengan bahasa pemrograman lainnya, seperti Flash dan lain-lain.

Saat ini, PHP telah menjadi salah satu bahasa pemrograman yang terpopuler, sebab dapat mengarahkan penggunanya ke versi seluler situs web Anda. Cara untuk melakukannya adalah dengan menggunakan strpos () untuk mencari nama perangkat tertentu, seperti contoh:

<?php

$android = strpos($_SERVER[‘HTTP_USER_AGENT’],”Android”);

$bberry = strpos($_SERVER[‘HTTP_USER_AGENT’],”BlackBerry”);

$iphone = strpos($_SERVER[‘HTTP_USER_AGENT’],”iPhone”);

$ipod = strpos($_SERVER[‘HTTP_USER_AGENT’],”iPod”);

$webos = strpos($_SERVER[‘HTTP_USER_AGENT’],”webOS”);

if ($android || $bberry || $iphone || $ipod || $webos== true)

{

header(‘Location: http://www.yoursite.com/mobile’);

}

?>

Jika Anda ingin agar pengguna beralih ke situs seluler, maka Anda harus memberitahukan kepada pengguna cara mudah untuk dapat mengakses situs tersebut.

Hal lainnya yang perlu diingat adalah ketika seorang pengguna mencapai situs Anda dari mesin pencari, kebanyakan dari mereka tidak melalui halaman beranda situs Anda. Karena itu, pastikan Anda telah mengarahkan pengguna ke versi seluler dari halaman hasil mesin pencari.

Yang menarik di sini adalah skrip pengalih CSS yang dapat ditulis ke dalam bahasa PHP. Hal ini dilakukan agar pengguna dapat memasang template CSS yang berbeda melalui menu drop down. Tujuannya agar konten yang ditampilkan ramah dalam versi seluler yang berbeda, baik untuk ponsel dan tablet lainnya.

Dengan cara ini, maka pengguna akan memiliki opsi untuk dapat beralih ke salah satu dari pilihan tersebut serta jika mereka mau, mereka akan tetap dapat menampilkan versi asli dari situs ini.

Cara Belajar PHP Membuat Website – LPK ALFABANK JOGJA merupakan tempat yang pelatihan dan kursus komputer terlengkap di Jogja. Instruktur kami siap untuk menjadi partner anda untuk belajar PHP, cara membuat website, Belajar MySQL, Belajar HTML, Belajar Komputer, Web Desain dan bahasa secara total sudah ribuan alumni kami yang bekerja di perusahaan loka, daerah ataupun nasional. Jadi jangan sia-siakan dan segeralah mulai belajar di LPK ALFABANK JOGJA.

Di ALFABANK JOGJA tersedia berbagai macam KURSUS dan pelatihan web, mulai dari php sampai dengan SQL. Instruktur dan trainer Jogja kami akan membantu Anda mempelajari berbagai teknik cara membuat website maupun blog. Jika Anda seorang pemula alias newbie, kami sarankan mulai dengan memiliki beberapa pengetahuan dasar seperti :

Pengetahuan belajar cara membuat website (baca ini dulu terutama untuk pemula)
Pengetahuan cara membuat blog (untuk pemula)
Pengetahuan belajar HTML tingkat dasar (untuk pemula)
Pengetahuan PHP tingkat dasar (untuk pemula)
Pengetahuan mSQL tingkat dasar (untuk pemula)

Ingin memperoleh update artikel / tutorial terbaru? Gampang, kamu tinggal gabung di fanspage fb kita : kursuskomputerjogja, untuk mendapatkan info tutorial baru melalui twitter dan mengikuti kuliah twitter gratis dari saya tentang cara membuat website, SEO, dll.

Web Blog ini berjudul, Awonapa Bonsai - Menjual Produk Tanaman Bonsai. Tujuan awal membuat website ini adalah untuk Tugas Akhir di Kampus, selain itu untuk referensi / dokumentasi membuat web blog sederhana.

Hal yang harus teman-teman siapkan yaitu :

Text Editor (notepad / sublime / vscode / atom)
XAMPP
Pemahaman Dasar HTML (Belajar HTML Lengkap)
Pemahaman Dasar CSS (Belajar CSS Lengkap)
Pemahaman Dasar PHP
Pemahaman Dasar MySQL

hal-hal diatas adalah hal minimal yang harus teman-teman ketahui . Beda ya kalau cuma copy paste gausah paham" amat :). Oke langsung ke inti aja.

Membuat Website Blog Menggunakan PHP MySQL

Pertama buat folder TA di dalam folder xampp/htdocs, lalu jalankan XAMPP teman-teman terlebih dahulu, lalu buka teks editornya.

Halaman Home Website Blog ( index.php)

<?php
require 'func.php'
?>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="style.css">
		<title>Awonapa Bonsai - Menjual Produk Tanaman Bonsai</title>
	</head>
	<body>
		<div class="container">
			<div class="header text-center text-light">
				<h3 style="padding: 20px;">Awonapa Bonsai</h3>
				<div class="banner">
					<img src="bonsai.png" alt="">
				</div>
			</div><hr>
			<nav class="navigasi">
				<ul>
					<li><a href="index.php">Home</a></li>
					<li><a href="admin/admin.php">Admin Page</a></li>
				</ul>
			</nav>
			<div class="section">
				<hr>
				<marquee behavior="" direction=""><b>Selamat Datang Di Awonapa Bonsai - Menjual Produk Tanaman Bonsai</b></marquee>
				<hr>
				<br>
			</div>
			<div class="center">
				<?php
						$sql = "select * from t_artikel order by id asc";
						$res = mysqli_query($con, $sql);
						while ($data = mysqli_fetch_array($res)) {
							if(strlen($data["isi"] >= 40)) {
								echo $data["isi"];
							} else {
								$z = '....';
								$y = substr($data["isi"],0,320) .'<br><a href=detail.php?id='.$data["id"].'><button class="btn-info">Baca Selengkapnya</button></a>';
					};
				?>
				<div class="box">
					<div class="isi" align="justify">
						<h2 style="margin-bottom: 5px"><?php echo $data["judul"]; ?></h2>
						<hr>
						<p class="by">by wahyu pambudi</p>
						<hr>
						<br>
						<div class="left">
						<img width="100%" height="150px" src="img/<?php echo $data['gambar'];?>"/>
						</div>
						<p style="margin-top: 5px"><?php echo $y; ?></p><br><hr>	
					</div>
				</div>
				<?php
					}
				?>
			</div>
			<div class="right">
				<div class="box">
					<div class="isi" align="center">
						<h3>Profil Developer</h3><br>
						<img width="100%" src="img/wahyu.jpg" alt="wahyu" style="border-radius: 50%"><br>
						<div style="margin: 10px; display: inline;">
							<p>Wahyu Pambudi</p>
							<p>19312302</p>
							<p>Informatika 19 GX</p>
							<a href="https://api.whatsapp.com/send?phone=6289682787161&text=Assalamualaikum%20Wr%20Wb"><button class="btn-info">WhatsApp</button></a>
							<a href="https://www.linkedin.com/in/wahyup9/"><button class="btn-info">LinkedIn</button></a>
						</div>
					</div>
				</div>
				<div class="box">
					<div class="isi">
						<h3>Artikel Terbaru</h3>
						<?php
							$sql = "select id, judul, gambar from t_artikel order by id desc";
							$res = mysqli_query($con, $sql);
							$no = 0;
							while ($data = mysqli_fetch_array($res)) {
						?>
						<div style="margin-bottom: 5px;">
							<fieldset style="text-align: center; border-color: #F3F1F1">
								<legend>
									<h6 href="" style="padding: 5px; font-size: 15px;"><?php echo $data["judul"]; ?></h6>
								</legend>
								<img style="padding: 10px;" width="100%" height="150px" src="img/<?php echo $data['gambar'];?>"/>
								<a href="detail.php?id=<?php echo($data['id'])?>"><button class="btn-info">Baca Selengkapnya</button></a>
							</fieldset>
						</div>
						<?php
						}
						?>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

Pada kodingan diatas, saya memanggil func.php yang berguna untuk menghubungkan halaman web ke Database MySQL nya.

Mengkoneksikan ke Database (func.php)

<?php 
	$con = mysqli_connect("localhost", "root", "", "db_artikel");

	if(!$con) {
		die("Koneksi Gagal : ". mysqli_connect_error());
	};
?>

Untuk menghubungkan halaman web ke MySQL menggunakan perintah

mysqli_connect

Header Website Untuk Admin Page (header.php)

Pada file ini, nantinya akan dipanggil pada halaman atau pada file admin.php. atau juga bisa digunakan di halaman lain. Cara memanggilnya seperti ini ( <?php require 'header.php'?> )

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Header</title>
</head>

<body>
    <div class="container header text-center text-light">
        <h3 style="padding: 20px;">Awonapa Bonsai</h3>
    </div>
</body>

</html>

maka akan menampilkan hasil seperti ini

Membuat Detail Artikel (detail.php)

Detail artikel, berfungsi untuk melihat atau membaca secara keseluruhan dari artikel yang ada pada index.php atau homepage.

Berikut ini Sintak detial.php nya.

<?php
require 'func.php'
?>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="style.css">
	<!-- <title>Awonapa Bonsai - Menjual Produk Tanaman Bonsai</title> -->
</head>

<body>
	<div class="container">
		<div class="header text-center text-light">
			<h3 style="padding: 20px;">Awonapa Bonsai</h3>
			<div class="banner">
				<img src="bonsai.png" alt="">
			</div>
		</div>
		<hr>
		<nav class="navigasi">
			<ul>
				<li><a class="active" href="index.php">Home</a></li>
				<li><a href="admin/admin.php">Admin Page</a></li>
			</ul>
		</nav>
		<div class="section">
			<hr>
				<marquee behavior="" direction=""><b>Selamat Datang Di Awonapa Bonsai - Menjual Produk Tanaman Bonsai</b></marquee>
			<hr>
			<br>
		</div>
		<div class="center">
			<div class="box">
				<?php
						$id = $_GET["id"] ;
						$sql = "select * from t_artikel WHERE id = '$id'";
						$res = mysqli_query($con, $sql);
						while ($data = mysqli_fetch_array($res)) {
					?>

				<div class="isi" align="justify">
					<h2><?php echo $data["judul"]; ?></h2>
					<title><?php echo $data["judul"]; ?></title>
					<hr>
					<p class="by">by wahyu pambudi</p>
					<hr>
					<br>
					<img width="100%" src="img/<?php echo $data['gambar'];?>"/>
					<p style="margin-top: 5px"><?php echo $data["isi"]; ?></p><br><br>
					<div align="center">
						<a href="https://wa.me/6289682787161?text= Saya Mau Beli  <?php echo $data["judul"];  ?>" target="_blank"><button class="btn-info">Beli Melalui Whatsapp!!</button></a>
					</div>
					<hr>
				</div>
				<?php
					}
					?>
					
				<?php
							$id = $_GET["id"];
							$before = $id - 1;
							$after = $id + 1;
							$first = "SELECT id FROM t_artikel ORDER BY id ASC LIMIT 1";
							$res_f = mysqli_query($con, $first);
							$sql_a = "select * from t_artikel WHERE id = '$before'";
							$sql_b = "select * from t_artikel WHERE id = '$after'";
							$res_a = mysqli_query($con, $sql_a);
							$res_b = mysqli_query($con, $sql_b);
							while ($data = mysqli_fetch_array($res_a)) {
					?>
				<a href="detail.php?id=<?php echo($data['id'])?>"><button>Sebelumnya</button></a>
				<!-- <a href="index.php"><button>Kembali</button></a> -->
				<?php
					} while ($data = mysqli_fetch_array($res_b)) {
						while ($dataa = mysqli_fetch_array($res_f)) {
						if($dataa[0]) {
							?>
								<a href="index.php"><button>Kembali</button></a>
						<?php
						}
					};
						?>
				<a href="detail.php?id=<?php echo($data['id'])?>"><button>Berikutnya</button></a>
				<?php
					}
					?>
			</div>
		</div>
		<div class="right">
				<div class="box">
					<div class="isi" align="center">
						<h3>Profil Developer</h3><br>
						<img width="100%" src="img/wahyu.jpg" alt="wahyu" style="border-radius: 50%"><br>
						<div style="margin: 10px; display: inline;">
							<p>Wahyu Pambudi</p>
							<p>19312302</p>
							<p>Informatika 19 GX</p>
							<a href="https://api.whatsapp.com/send?phone=6289682787161&text=Assalamualaikum%20Wr%20Wb"><button class="btn-info">WhatsApp</button></a>
							<a href="https://www.linkedin.com/in/wahyup9/"><button class="btn-info">LinkedIn</button></a>
						</div>
					</div>
				</div>
				<div class="box">
					<div class="isi">
						<h3>Artikel Terbaru</h3>
						<?php
							$sql = "select id, judul, gambar from t_artikel order by id desc";
							$res = mysqli_query($con, $sql);
							$no = 0;
							while ($data = mysqli_fetch_array($res)) {
						?>
						<div style="margin-bottom: 5px;">
							<fieldset style="text-align: center; border-color: #F3F1F1">
								<legend>
									<h6 href="" style="padding: 5px; font-size: 15px;"><?php echo $data["judul"]; ?></h6>
								</legend>
								<a href="detail.php?id=<?php echo($data['id'])?>"><button class="btn-info">Baca Selengkapnya</button></a>
							</fieldset>
						</div>
						<?php
						}
						?>
					</div>
				</div>
			</div>
	</div>
	<div style="margin-bottom: 200px">

	</div>
</body>

</html>

Membuat Admin Page

Sebelum membuat halaman admin page, pastikan teman-teman sudah membuat folder dengan nama admin di dalam folder TA terlebih dahulu.

Membuat Halaman Admin (admin.php)

<?php require '../func.php' ?>
<?php
if(isset($_GET['delete'])) {
$id = $_GET['delete'];
$query = mysqli_query($con, "DELETE FROM t_artikel WHERE id='$id'");
header("Location: admin.php");
}
?>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../style.css">
    <title>Admin</title>
    <style>
    textarea,
    select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    }
    input[type=text],
    select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    }
    input[type=file],
    select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: white;
    }
    input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    }
    input[type=submit]:hover {
    background-color: #45a049;
    }
    div {
    border-radius: 5px;
    /*background: linear-gradient(to right, #45a049, #1cb5e0);*/
    padding: 20px;
    }
    </style>
  </head>
  <body>
    <?php
    $page = @$_GET['page'];
    if($page == "add") {
    include 'add.php';
    }
    ?>
    <div class="container">
      <hr>
      <h3 align="center" class="text-dark">Admin Page Awonapa Bonsai</h3>
      <hr><br>
      <a href="../index.php"><button class="button">Kembali</button></a>
      <a href="?page=add"><button class="btn-info">Add Article</button></a><br>
      <div>
        <h3>List Article</h3>
        <?php
        $sql = "select id, judul from t_artikel order by id asc";
        $res = mysqli_query($con, $sql);
        while ($data = mysqli_fetch_array($res)) {
        ?>
        <div align="justify">
          <span><?php echo $data["judul"]; ?></span>
          <a href="admin.php?delete=<?php echo $data["id"] ?>"><button class="button">Delete</button></a><hr>
        </div>
        <?php
        }
        ?>
      </div>
    </div>
    
  </body>
</html>

Membuat Halaman Add Artikel (add.php)

Halaman Add Artikel ini akan muncul ketika kita mengklik button add article.

Berikut sintak nya :

<div class="container">
    
    <div class="" style="padding: 10px">
      <!-- <h3 class="text-center text-dark">Add Article</h3> -->
      <a href="admin.php"><button class="btn-danger">Close</button></a>
      <h4 align="center" class="btn-info">Add Article Page</h4>
      <?php
        function input($data)
        {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
        }
        if (isset($_POST["add_post"])) {
          
          $judul = input($_POST["judul"]);
          $gambar = @$_FILES['gambar']['name'];
          $tmp = @$_FILES['gambar']['tmp_name'];
          $gambarbaru = date ('dmYis').$gambar;
          $path = "../img/".$gambarbaru;
          $isi = input($_POST["isi"]);

      if(move_uploaded_file($tmp, $path)) {
          $sql = "insert into t_artikel (judul,gambar,isi) values ('$judul','$gambarbaru','$isi')";
          $hasil = mysqli_query($con, $sql);

            if ($hasil ) {
              header("Location:../index.php");
            } else{
              echo "Pesan Error ". mysqli_error($con);
            }
        }
      }
        ?>
      <form action="" method="post" enctype="multipart/form-data">
        <div class="u_form">
          <input type="text" name="judul" placeholder="Article Title" required />
        </div>
        <div class="u_form">
          <input type="file" name="gambar" placeholder="Input Image" required />
        </div>
        <div class="u_form">
          <!-- <input type="text" name="isi" placeholder="Isi Artikel" required /> -->
          <textarea name="isi" rows="5" placeholder="Input Article Content" required
            style="height: 150px"></textarea>
        </div>
        <button type="submit" name="add_post">Submit</button>
      </form>
    </div>
  </div>

Membuat Folder img untuk gambar

Berikutnya jangan lupa untuk membuat folder img pada folder TA karena folder ini akan menampung hasil gambar yang akan di upload pada halaman admin/add article.

Jika teman-teman sudah menyelesaikan semua kodingan diatas, maka hasil Website Blog Menggunakan PHP MySQL, akan seperti ini :

Presentasi Mengenai Membuat Website Blog Menggunakan PHP MySQL

Untuk teman-teman yang ingin mengunduh source code bisa mengunduh dibawah ini, jangan lupa kasih bintang ya!

Langkah langkah membuat web 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.

Website apa saja yang menggunakan PHP?

Masih banyak lagi website raksasa yang menggunakan PHP, diantaranya baidu dari china, ada juga blogspot situs blog gratisan yang sangat banyak digunakan oleh para blogger, serta website TED yang merupakan website presentasi berbagai hal yang paling terkenal didunia. ITGID provide untuk training Bahasa Pemrograman PHP.

Bagaimana fungsi PHP pada sebuah website?

Fungsi PHP dalam Web Programming Seperti disebut sebelumnya, PHP adalah bahasa pemrograman yang ada di sisi server. Bahasa ini digunakan untuk mengelola konten dinamis, database, session tracking, dan bahkan keseluruhan situs e-commerce. Sebetulnya, kamu bisa membuat web dengan memakai HTML saja.

kode php