Selasa, 26 Desember 2017

LKS WEB DESIGN 2017


Setetiku~Hallo sobat blogger, Kali ini saya akan membagikan turorial membuat web sederhana, Pengalaman saya dari ikut lomba lks tingkap provinsi sumatra selatan, pertama sobat blogger harus mempunyai software seperti, Adobe Dream Weaver, Xampp, dan Notepad++, untuk mempermudah dalam pembuatan web sederhana tersebut.

Pada postingan ini, saya akan membagikan turotial dan script untuk membuat web sederhana, atau Web News yang mempunyai fitur, Home, Sport, Healthy, Technology, Education, Login, Logout, Administration page, dan News page.

Download, Macromedia Dreamweaver,Notepad++,Xampp







Oke sobat langsung saja kita mulai,





>Script style.css
Note: Simpan dalam format .css, contoh: style.css


>Script index.php
Note: Simpan dalam format .php, contoh: index.php


>Script connection.php
Note: Simpan dalam format .php, contoh connection.php


>Script page-archive.php
Note: Simpan dalam format .php, contoh page-archive.php  

>Script page-cek_login.php
Note: Simpan dalam format .php, contoh page-cek_login.php  

>Script page-login.php
Note: Simpan dalam format .php, contoh  page-login.php

>Script page-logout.php
Note: Simpan dalam format .php, contoh page-logout.php 

>Script page-posting.php, maaf script ini tidak bisa di tag dengan <textarea></textarea> karena akan error.
Note: Simpan dalam format .php, contoh page-posting.php  
<?php error_reporting(E_ERROR | E_PARSE | E_WARNING);?>
<?php
if (!isset($_SESSION))
{
session_start();
}
?>
<html>
<head>
<title>setetiku.blogspot.com</title>
<!--Custom Css -->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="utama">

<div id="header"><img src="0.png" width="1000" height="150">
</div>

<div id="topmenu">
<a href="index.php">Administrator Page </a>
<a href="page-retrieve.php">News List</a>
<a href="page-login.php">LOGOUT</a>
</div>

<div id="isi">
<div id="kiri">

<!-- Awal Page News -->
<form name="form1" action="page-proces.php" method="POST">
<table border="0"align="center">
<tr><th colspan="3">POST NEWS</th></tr>
<tr>
<td>New Title</td>
<td>:</td>
<td><input type="text" name="title"></td></tr>
<tr>
<td>News Category</td>
<td>:</td>
<td>
<select name="category">
<option value="sport">Sport</option>
<option value="healthy">Health</option>
<option value="technology">Technology</option>
<option value="education">Education</option>
</select>
</td>
</tr>
<tr>
<td>News Content</td>
<td>:</td>
<td>
<textarea rows="10" cols="90" name="content">
</textarea>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="reset" name="Reset" value="Reset">
<input type="submit" name="simpan" value="Posting">
</td></tr>
</table>
</form>
<!-- akhir page news-->
</div>
</div>

<div id="footer"><center>copyright &copy; setetiku.blogspot.com</center></div>
</div>
</body>
</html>

 >Script page-process.php
Note: Simpan dalam format .php, contoh page-proces.php

>Script page-retrieve.php
Note: Simpan dalam format .php, contoh page-retrieve.php


>Script page-single.php


>Script page-update.php, maaf script ini tidak bisa di tag dengan <textarea></textarea> karena akan error.
 <?php error_reporting(E_ERROR | E_PARSE | E_WARNING);?>
<?php
if (!isset($_SESSION))
{
session_start();
}
?>
<?php
include "connection.php";
$edit=mysql_query("SELECT * FROM news WHERE id='$_id'") or die("MYSQL Q-1");
$hsedit=mysql_fetch_array($edit);
?>
<html>
<head>
<title>setetiku.blogspot.com</title>
<!--Custom Css -->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="utama">

<div id="header">
<img src="gambar/header.png" width="996"height="148">
</div>

<div id="topmenu">
<a href="index.php">Administrator Page</a>
<a href="page-posting.php">News List</a>
<align="right"><a href="logout.php">Logout</a></align>
</div>

<div id="isi">
<div id="kiri">
<?php
include "connection.php";
$edit=mysql_query("SELECT * FROM news WHERE id='$_GET[id]'") or die("SALAH");
$hsedit=mysql_fetch_array($edit);
?>
<!-- Awal Page Single -->
<form name="form1" action="page-proces.php" method="POST">
<table border="0" align="center">
<tr><th colspan="3">UPDATE NEWS</th></tr>
<tr>
<td>New Title</td>
<td>:</td><input type="text" name="id" value="<?php echo "$hsedit[id]"; ?>">
<td><input type="text" name="title" value="<?php echo "$hsedit[title]"; ?>"></td></tr>
<tr>
<td>News Category</td>
<td>:</td>
<td>
<select name="category">
<option value="sport">Sport</option>
<option value="healthy">Health</option>
<option value="technology">Technology</option>
<option value="education">Education</option>
</select>
</td>
</tr>
<tr>
<td>News Content</td>
<td>:</td>
<td>
<textarea rows="10" cols="90" name="content">
<?php echo "$hsedit[content]"; ?>
</textarea>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="reset" name="Reset" value="Reset">
<input type="submit" name="update" value="UPDATE">
</td></tr>
</table>
<!-- Akhir Page Single-->
</form>
</div>
</div>

<div id="footer"><center>copyright &copy; setetiku.blogspot.com</center></div>
</div>
</body>
</html>

>File Database nya


Masukkan semua file coding di atas dalam sebuah folder, beri nama, contoh (test3)
kemudian save di>localdisk(c)>xampp>htdocs>test3


>Buka software Xampp, pencet start pada kotak Apache dan MySQL

Setelah itu buka browser, ketik localhost/phpmyadmin


Create database, isi nama "Information_portal2" tanpa tanda kutip lalu create


 Setelah di buat, masukkan file database nya




Klik GO

Sekarang lanjut membuat user login, ikuti saja seperti gambar dibawah ini

Lalu klik GO
Sekarang kita tes, buka tab baru di browser, ketik "localhost/test3"






SELESAI, Semoga bermanfaat dan memambah ilmu bagi sobat blogger semua.




0 komentar:

Posting Komentar