Proweb Tutorial

Sabtu, 27 Oktober 2018

Catatan Tentang HTML 5

Assalamualaikum Warahmatullahi Wabarokatuh

hello kawan semua.............

Di sini saya akan memberikan beberapa penjelasan tentang HTML 5.

A. Struktur HTML 5.

<html>
<head>
<title>HTML %</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header role="banner">
<h1>HTML5</h1>
</header>
<nav>

</nav>
<article>

</article>
<aside>

</aside>
<figure>

</figure>
<footer>

</footer>
</body>
</html>

B. Tag - Tag pada HTML

Tag <!DOCTYPE html> adalah sebuah deklerasi atau untuk mengidentifikasi jenis dokumen HTML yang digunakan agar browser dapat menentukan bagaimana memperlakukan kode tersebut. Proses deklarasi ini cukup dilakukan sekali saja saat dokumen HTML dijalankan.

Tag <html>...</html>

Tag <HTML> tugasnya adalah sebagai root, maksudnya semua tag yang berada didalam tag <HTML> merupakan gambaran dari dokumen HTML.

Tag <head>...</head>

Tag <HEAD> tugasnya adalah memberikan informasi tentang dokumen, maksudnya didalam tag <head> kita bisa menambahkan tag- tag yang biasanya digunakan untuk memberikan informasi berupa penulis, judul dokumen, kata kunci pada dokumen dan masih banyak lagi informasi yang bisa di tambahkan pada tag ini.

Tag <title>...</title>

Tag <TITLE> tugasnya adalah memberikan informasi berupa judul dokumen HTML.

Tag <body>...</body>

Tag <BODY> tugasnya adalah memberikan isi dari suatu dokumen yang akan ditampilkan oleh web browsernya.

Tag <p>...</p>

Tag <P> tugasnya adalah untuk membuat sebuah paragraf.

Tag 

Tag  tugasnya adalah memberikan komentar pada sebuah dokumen HTML, namun tulisan yang dimasukan dalam tag ini tidak akan terlihat pada Web browser saat dijalankan tetapi dapat dilihat pada source program.

B. Contoh Kode HTMl di Setiap Tag.

Untuk Menampilkan Sebuah Gambar

syntaknya sebagai berikut:

<img src="anime.jpg" alt="Anime" width="350" height="400">

hasilnya seperti gambar disamping.

Untuk menambahkan sebuah Auido

karena di blogger tidak dapat memasukkan audio jadi saya hanya memasukkan SS setelah di coding. Untuk codingnya seperti berikut :

<div>

<audio controls>

<source src="surat al-a'la.mpeg" type="audio/mpeg">

</audio>

</div>

Belajar menggunakan <iframe> (menambahkan maps pada web anda)

Langkah pertama adalah buka browser anda kemudian buka alamat website ini http://maps.google.com, setelah itu masukan alamat perusahaan anda lihat pada gambar dibawah ini

syntaknya sebagai berikut :

</iframe>

Belajar menggunakan <iframe> (menambahkan YouTube pada web anda)

1. Pertama-tama temna-teman persiapkan file HTMLnya simpan dengan nama index.html.

2. Kemudian buka www.youtube.com.

3. Setelah itu teman-teman klik “bagikan/share” yang ada di bawah video,

4. Kemudian teman-teman pilih “sematkan/embed” dan copy tag <iframe> yang sudah disiapkan oleh youtube,

5. Dan paste di file index.html kita tadi,

6. Hasilnya akan seperti ini,

syntaknya seperti ini :

<div>

</div>

Ini adalah syntak keseluruhan :

<!DOCTYPE html>

<html>

<body>

<div>

</div>

<br>

<div>

</audio>

</div>

<br>

<div>

</iframe>

</div>

<br>

<div>

</div>

</body>

</html>

OKEY....Cukup sekian yang dapat saya bagikan ke teman-teman sekalian, selamat mencoba , sekian dan terimakasih

Wassalamualaikum Warahmatullahi Wabarokatuh

Kamis, 15 Maret 2018

Membuat Aksi Dengan JavaScript

Assalamulaiakum warahmatullahi Wabarokatuh

kembali lagi di blog saya, sebelemnya saya telah memposting cara membuat form login dengan CSS. Postingan kali ini saya akan melanjutkan form login kemarin yang pernah saya posting, disini saya akan menambahkan sedikit javascript pada form login yang sebelumnya saya posting.

langsung saja kita mulai tutorialnya sebagai berikut:

1) Yang pertama yang perlu anda persiapkan bahan-bahannya adalah file javascript dan jquey , anda dapat mendownloadnya Disni.
Setelah anda mendownloadnya silahkan di extract . Setelah itu copy "bootsrap.min.js","jquery.min.js","popper.min.js" ke dalam folder project sebelumnya di folder JS.

2.) Langkah kedua yaitu masukkan javascript dan jquery ke dalam index.php , sesuaikan dimana anda menyimpan file tersebut. Scriptnya sebagai berikut dan copykan pada file index.php :

3.) Menambahkan alert pada project form login sebelumnya , untuk scriptnya dapat dilihat dibawah ini dan copykan pada file index.php:

<strong>WARNING!</strong> Hati-hati JOMBLO.

</button>

</div>

4.) Langkah berikutnya yaitu menambahkan Aksi pada komponen alert , untuk scriptnya sebagai berikut dan copykan pada file index.php:

window.setTimeout(function() {

$(".alert").fadeTo(400,0).slideUp(400,function (){

$(this).remove();

});

},3000); >>Disini Alert akan muncul selama 3 detik

</script>

5.) Untuk full source code bisa dilihat dibawah ini , source code ini copykan pada file index.php.

6.) Kemudian copykan source code dibawah ini dengan nama file login.php

7.) Setelah semua source code dimasukan ke dalam project anda , akan tampil formnya sebagai berikut:

sekian dan terimakasih , mungkin hanya sedikit yang dapat saya posting , sekiranya masih banyak kekurangan mohon maaf, karena disni kita juga sama-sama belajar.

Wassalamualaikum Warahmatullahi Wabarokatuh

sampai ketenu lagi di postingan berikutnya

Minggu, 04 Maret 2018

Membuat Tampilan Login Menggunakan CSS ataupun Bootstrap4

Assalamualaikum Warohmataullahi Wabarokatuh

Hello kawan , di Postingan kali ini , saya akan membahas tentang tutorial bagaimana membuat tampilan Login. Untuk dapat membuat tampilan login anda harus mempunyai beberapa alat untuk tempur hehe....

Beberapa alat yang perlu anda persiapkan antara lain:

1. Disini saya menggunakan TextEditor NetBeans , jika anda belum memiliki silahkan download di
link https://netbeans.org/downloads/. Anda juga bisa menggunakan texteditor lain banyak pilihan.

2. Anda harus mendownload Bootsrap , anda dapat mendownloadnya di link ini
  https://getbootstrap.com/.

3. Jika anda belum memiliki CSS untuk tampilan, anda dapat copas CSS berikut ini :
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">.

4. Dan ini JS_nya :
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

5. Silahkan copy syntak dibawah ini , dan masukkan ke dalam texteditor anda dan di simpan dengan nama index.php.

<?php
session_start();
//session_register("salah");
ini_set('display_errors',0);
$_SESSION['salah']=0;
if ($_SESSION["salah"]>=3){
echo '<h1>Anda Dalam Kondisi Diblokir</h1>';
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Facebook</title>
<link rel="icon" href="images/images.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/floating-labels.css">
<script>
// function hello()
{
//var email= document.getElementById('email').value;
//alert("Email: "+email)
document.getElementById("email").addEventListener("keyup",function(event){
event.preventDefault();
if(event === 13){
document.getElementById("password").focus();
}
});*//
}
</script>
</head>
<body>
<form id="frm01" name="frm01" action="login.php" method="POST" class="form-signin">
<div class="text-center mb-4">
<img class="mb-4" width="80" height="80" src="images/images.png">
<h1>Facebook</h1>
<p>Untuk Mencoba Buat Form Login</p>
</div>
<div class="form-label-group">
<input class="form-control" type="email" name="email" id="email"
placeholder="Email address" required="" autofocus="no" autocomplete="no">
<label for="email">Email address</label>
</div>
<div class="form-label-group">
<input class="form-control" type="password" name="password" id="password"
placeholder="password " required="" autofocus="yes" autocomplete="yes">
<label for="password">password</label>
</div>
<div class="custom-checkbox mb-1">
<a href="#" target="_blank"> Buat Akun</a>
</div>
<div class="custom-checkbox mb-1">
<a href="#" target="_blank"> Lupa Password?</a>
</div>

<div class="checkbox mb-3">
<label>
<input type="checkbox"> Remember me
</label>
</div>

<button class="btn btn-lg btn-primary btn-block " type="submit">Sign in</button>
</form>
</body>
</html>

6. Langkah selanjutnya copykan syntak berikut ini pada textediotr dan disimpan dengan nama login.php.

<?php
session_start();
$user= $_POST['email'];
$pass= $_POST['password'];
//============================
$dbuser = "admin@gmail.com";
$dbadmin = "admin123";
//============================
if($user == $dbuser && $pass == $dbpass){
echo '<h1>SELAMAT SUKSES</h1>';
}
else{
$_SESSION["salah"]++;
header("location:index.php");

}

7. Beginilah hasil nya

Sekian dan terimakasih untuk postingan kali ini, semoga bisa bermanfaat , selamat mencoba

Matur Suwun.......

Sabtu, 03 Maret 2018

HTML 5

Assalamualaikum Warahmatullahi Wabarokatuh

hello kawan semua.............

Di sini saya akan memberikan beberapa penjelasan tentang HTML 5.

Untuk Menampilkan Sebuah Gambar

syntaknya sebagai berikut:

<img src="anime.jpg" alt="Anime" width="350" height="400">

hasilnya seperti gambar disamping.

Untuk menambahkan sebuah Auido

karena di blogger tidak dapat memasukkan audio jadi saya hanya memasukkan SS setelah di coding. Untuk codingnya seperti berikut :

<div>

<audio controls>

<source src="surat al-a'la.mpeg" type="audio/mpeg">

</audio>

</div>

Belajar menggunakan <iframe> (menambahkan maps pada web anda)

Langkah pertama adalah buka browser anda kemudian buka alamat website ini http://maps.google.com, setelah itu masukan alamat perusahaan anda lihat pada gambar dibawah ini

syntaknya sebagai berikut :

</iframe>

Belajar menggunakan <iframe> (menambahkan YouTube pada web anda)

1. Pertama-tama temna-teman persiapkan file HTMLnya simpan dengan nama index.html.

2. Kemudian buka www.youtube.com.

3. Setelah itu teman-teman klik “bagikan/share” yang ada di bawah video,

4. Kemudian teman-teman pilih “sematkan/embed” dan copy tag <iframe> yang sudah disiapkan oleh youtube,

5. Dan paste di file index.html kita tadi,

6. Hasilnya akan seperti ini,

syntaknya seperti ini :

<div>

</div>

Ini adalah syntak keseluruhan :

<!DOCTYPE html>

<html>

<body>

<div>

</div>

<br>

<div>

</audio>

</div>

<br>

<div>

</iframe>

</div>

<br>

<div>

</div>

</body>

</html>

OKEY....Cukup sekian yang dapat saya bagikan ke teman-teman sekalian, selamat mencoba , sekian dan terimakasih

Wassalamualaikum Warahmatullahi Wabarokatuh