Selamat malam, salah sejahtera untuk kita semua. Kali ini saya mau berbagi sedikit ilmu yang Insya Allah bermanfaat buat teman-teman mahasiswa sekalian. Belajar Java - Array 1 Dimensi dan 2 Dimensi. Konsepnya sama saja seperti bahasa pemrograman lainnya, setidaknya kalian paham dan mengerti pemrograman terstruktur, perulangan. Untuk penulisan dalam javanya sendiri seperti dibawah ini.
ARRAY 1 DIMENSI
public class PreTest2 {
public static void main(String[] args) {
int[] nilai_uts = new int[5];
String[] nama = new String[5];
nilai_uts[0] = 90;
nilai_uts[1] = 80;
nilai_uts[2] = 70;
nilai_uts[3] = 40;
nilai_uts[4] = 50;
nama[0] = "Isnan";
nama[1] = "Is";
nama[2] = "nan";
nama[3] = "san";
nama[4] = "Inan";
System.out.println("Nama Makhluk pada index ke 3 = "+nama[3]);
System.out.println("Nilai UTS index ke 0 = "+nilai_uts[0]);
}
}
public static void main(String[] args) {
int[] nilai_uts = new int[5];
String[] nama = new String[5];
nilai_uts[0] = 90;
nilai_uts[1] = 80;
nilai_uts[2] = 70;
nilai_uts[3] = 40;
nilai_uts[4] = 50;
nama[0] = "Isnan";
nama[1] = "Is";
nama[2] = "nan";
nama[3] = "san";
nama[4] = "Inan";
System.out.println("Nama Makhluk pada index ke 3 = "+nama[3]);
System.out.println("Nilai UTS index ke 0 = "+nilai_uts[0]);
}
}
Dari script diatas, yang cetak tebal bisa teman - teman ubah sesuai kebutuhan, script diatas juga merupakan array 1 dimensi yang mana nilai dari masing - masing arraynya sudah di tentukan. Nah bagaimana jika kita mau input arraynya sendiri ? maka dari itu kita perlu menggunakan perulangan for. Caranya sama saja seperti di bahasa pemrograman lainnya, hanya saja yang kita perlu tambahkan adalah library java yang berfungsi untuk membaca input dari user.
import java.util.scanner
import java.util.Scanner;
public class PreTest2 {
public static void main(String[] args) {
int[] nilai_uts = new int[5];
String[] nama = new String[5];
//input untuk nilai uts
Scanner scan = new Scanner(System.in);
for(int i=0; i<5; i++){
nilai_uts[i] = scan.nextInt();
}
//input untuk nama
Scanner scan = new Scanner(System.in);
for (int i=0; i<5; i++){
nama[i] = scan.nextLine();
}
}
public class PreTest2 {
public static void main(String[] args) {
int[] nilai_uts = new int[5];
String[] nama = new String[5];
//input untuk nilai uts
Scanner scan = new Scanner(System.in);
for(int i=0; i<5; i++){
nilai_uts[i] = scan.nextInt();
}
//input untuk nama
Scanner scan = new Scanner(System.in);
for (int i=0; i<5; i++){
nama[i] = scan.nextLine();
}
}
Nah itu tadi sedikit tutorial java tentang array 1 dimensi, selanjutnya saya akan bahas array 2 dimensi di artikel berikutnya. Stay tune!!!
Berikut dua contoh program C++ untuk array 1 dimensi, semoga dapat membantu tugasnya.
#include <stdio.h>
int main (){
char a[8];
for (int i=0; i<8; i++){
printf("%x\n",&a[i]);
}
return 0;
}
int main (){
char a[8];
for (int i=0; i<8; i++){
printf("%x\n",&a[i]);
}
return 0;
}
==========///==============///===============///===========
#include <stdio.h>
int main()
{
int a[8];
for (int i=0; i<8; i++){
printf("%x\n",&a[i]);
}
}
int main()
{
int a[8];
for (int i=0; i<8; i++){
printf("%x\n",&a[i]);
}
}
Script diatas merupakan contoh program array 1 dimensi yang sangat amat simple, dan mudah dipelajari
Untuk membuat sistem login dengan multi level user, pertama - tama kita harus membuat database SQL nya.
-- phpMyAdmin SQL Dump
-- version 4.7.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Feb 05, 2018 at 06:30 AM
-- Server version: 10.1.25-MariaDB
-- PHP Version: 5.6.31
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `final`
--
-- --------------------------------------------------------
--
-- Table structure for table `pengguna`
--
CREATE TABLE `pengguna` (
`id_pengguna` int(4) NOT NULL,
`username` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
`peran` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `pengguna`
--
INSERT INTO `pengguna` (`id_pengguna`, `username`, `password`, `peran`) VALUES
(1, 'admin', '21232f297a57a5a743894a0e4a801fc3', 'admin'),
(2, 'rezkycpp', '2c7ef4281d0d5aaf23b436d3fb36ff0f', 'member');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `pengguna`
--
ALTER TABLE `pengguna`
ADD PRIMARY KEY (`id_pengguna`),
ADD UNIQUE KEY `username` (`username`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `pengguna`
--
ALTER TABLE `pengguna`
MODIFY `id_pengguna` int(4) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
-- version 4.7.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Feb 05, 2018 at 06:30 AM
-- Server version: 10.1.25-MariaDB
-- PHP Version: 5.6.31
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `final`
--
-- --------------------------------------------------------
--
-- Table structure for table `pengguna`
--
CREATE TABLE `pengguna` (
`id_pengguna` int(4) NOT NULL,
`username` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
`peran` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `pengguna`
--
INSERT INTO `pengguna` (`id_pengguna`, `username`, `password`, `peran`) VALUES
(1, 'admin', '21232f297a57a5a743894a0e4a801fc3', 'admin'),
(2, 'rezkycpp', '2c7ef4281d0d5aaf23b436d3fb36ff0f', 'member');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `pengguna`
--
ALTER TABLE `pengguna`
ADD PRIMARY KEY (`id_pengguna`),
ADD UNIQUE KEY `username` (`username`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `pengguna`
--
ALTER TABLE `pengguna`
MODIFY `id_pengguna` int(4) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Setelah database dibuat selanjutnya kita membuat connection.php untuk menghubungkan database tadi dengan page loginnya.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db = "final";
$conn = new mysqli($servername, $username, $password, $db);
if ($conn->connect_error) {
die("Database belum terhubung : " . $conn->connect_error);
}
?>
$servername = "localhost";
$username = "root";
$password = "";
$db = "final";
$conn = new mysqli($servername, $username, $password, $db);
if ($conn->connect_error) {
die("Database belum terhubung : " . $conn->connect_error);
}
?>
Untuk servername bisa kalian isi sesuaikan, begitu pula username dan passwordnya, dan juga nama databasenya bisa kalian sesuaikan sendiri dan save dengan nama connection.php.
Berikutnya kita membuat Session Loginnya.
<?php
$error='';
include "config.php";
if(isset($_POST['submit']))
{
$username = $_POST['username'];
$password = md5($_POST['password']);
$query = mysqli_query($conn, "SELECT * FROM pengguna WHERE username='$username' AND password='$password'");
if(mysqli_num_rows($query) == 0)
{
$error = "Username or Password is invalid!";
}
else
{
$row = mysqli_fetch_assoc($query);
$_SESSION['username'] = $row['username'];
$_SESSION['peran'] = $row['peran'];
$_SESSION['id_pengguna']= $row['id_pengguna'];
if($row['peran'] == "admin")
{
header("Location: admin/index.php");
}
else if($row['peran'] == "member")
{
header("Location: member/index.php");
}
else
{
$error = "Failed Login, check again!";
}
}
}
?>
$error='';
include "config.php";
if(isset($_POST['submit']))
{
$username = $_POST['username'];
$password = md5($_POST['password']);
$query = mysqli_query($conn, "SELECT * FROM pengguna WHERE username='$username' AND password='$password'");
if(mysqli_num_rows($query) == 0)
{
$error = "Username or Password is invalid!";
}
else
{
$row = mysqli_fetch_assoc($query);
$_SESSION['username'] = $row['username'];
$_SESSION['peran'] = $row['peran'];
$_SESSION['id_pengguna']= $row['id_pengguna'];
if($row['peran'] == "admin")
{
header("Location: admin/index.php");
}
else if($row['peran'] == "member")
{
header("Location: member/index.php");
}
else
{
$error = "Failed Login, check again!";
}
}
}
?>
Save dengan nama login.php, jika sudah lanjut kita akan membuat indexnya atau tampilan dari loginnya.
<?php
session_start();
if($_SESSION){
if($_SESSION['peran']=="admin")
{
header("Location: admin/index.php");
}
if($_SESSION['peran']=="member")
{
header("Location: member/index.php");
}
}
include('login.php');
?>
<!DOCTYPE html>
<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">
<title>LOGIN PAGE</title>
<!-- Bootstrap -->
<link href="src/css/bootstrap.min.css" rel="stylesheet">
<link rel="icon" href="src/icon/favicon.ico">
<style>
body {
background-image: url(src/img/login.jpg);
background-position: center;
background-repeat: no-repeat;
}
.row {
margin: 100px auto;
width: 300px;
text-align: center;
}
.login {
background-color: #fff;
padding: 20px;
margin-top: 20px;
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="login">
<h2>Login first!</h2>
<?php
/*if(isset($_POST['login'])){
include("config.php");
$username = $_POST['username'];
$password = md5($_POST['password']);
$query = mysqli_query($conn, "SELECT * FROM pengguna WHERE username='$username' AND password='$password'");
if(mysqli_num_rows($query) == 0){
echo '<div class="alert alert-danger">Upss...!!! Login gagal.</div>';
}else{
$row = mysqli_fetch_assoc($query);
if($row['peran'] == 'admin' && $peran == 'admin'){
$_SESSION['username']=$username;
$_SESSION['peran']='admin';
header("Location: ../admin/index.php");
}else if($row['peran'] == 'member' && $peran == 'member'){
$_SESSION['username']=$username;
$_SESSION['peran']='member';
header("Location: ../member/index.php");
}else{
echo '<div class="alert alert-danger">Upss...!!! Login gagal.</div>';
}
}
}*/
?>
<form role="form" action="" method="post">
<div class="form-group">
<input type="text" name="username" class="form-control" id="username" placeholder="Username" required autofocus />
</div>
<div class="form-group">
<input type="password" name="password" class="form-control" id="password" placeholder="Password" required autofocus />
</div>
<!--
<div class="form-group">
<select name="peran" class="form-control" required>
<option value="">Pilih Level User</option>
<option value="admin">Admin</option>
<option value="member">Member</option>
</select>
</div>
-->
<div class="form-group">
<input type="submit" name="submit" class="btn btn-primary btn-block" value="Login" />
</div>
<div class="form-group">
<input type="button" name="register" class="btn btn-primary btn-block" value="Register" />
</div>
<?php echo $error; ?>
</form>
</div>
Copyright © Kelompok 7 - DPW
</div>
</div>
<script src="src/js/jquery-3.3.1.js"></script>
<script src="src/js/bootstrap.min.js"></script>
</body>
</html>
session_start();
if($_SESSION){
if($_SESSION['peran']=="admin")
{
header("Location: admin/index.php");
}
if($_SESSION['peran']=="member")
{
header("Location: member/index.php");
}
}
include('login.php');
?>
<!DOCTYPE html>
<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">
<title>LOGIN PAGE</title>
<!-- Bootstrap -->
<link href="src/css/bootstrap.min.css" rel="stylesheet">
<link rel="icon" href="src/icon/favicon.ico">
<style>
body {
background-image: url(src/img/login.jpg);
background-position: center;
background-repeat: no-repeat;
}
.row {
margin: 100px auto;
width: 300px;
text-align: center;
}
.login {
background-color: #fff;
padding: 20px;
margin-top: 20px;
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="login">
<h2>Login first!</h2>
<?php
/*if(isset($_POST['login'])){
include("config.php");
$username = $_POST['username'];
$password = md5($_POST['password']);
$query = mysqli_query($conn, "SELECT * FROM pengguna WHERE username='$username' AND password='$password'");
if(mysqli_num_rows($query) == 0){
echo '<div class="alert alert-danger">Upss...!!! Login gagal.</div>';
}else{
$row = mysqli_fetch_assoc($query);
if($row['peran'] == 'admin' && $peran == 'admin'){
$_SESSION['username']=$username;
$_SESSION['peran']='admin';
header("Location: ../admin/index.php");
}else if($row['peran'] == 'member' && $peran == 'member'){
$_SESSION['username']=$username;
$_SESSION['peran']='member';
header("Location: ../member/index.php");
}else{
echo '<div class="alert alert-danger">Upss...!!! Login gagal.</div>';
}
}
}*/
?>
<form role="form" action="" method="post">
<div class="form-group">
<input type="text" name="username" class="form-control" id="username" placeholder="Username" required autofocus />
</div>
<div class="form-group">
<input type="password" name="password" class="form-control" id="password" placeholder="Password" required autofocus />
</div>
<!--
<div class="form-group">
<select name="peran" class="form-control" required>
<option value="">Pilih Level User</option>
<option value="admin">Admin</option>
<option value="member">Member</option>
</select>
</div>
-->
<div class="form-group">
<input type="submit" name="submit" class="btn btn-primary btn-block" value="Login" />
</div>
<div class="form-group">
<input type="button" name="register" class="btn btn-primary btn-block" value="Register" />
</div>
<?php echo $error; ?>
</form>
</div>
Copyright © Kelompok 7 - DPW
</div>
</div>
<script src="src/js/jquery-3.3.1.js"></script>
<script src="src/js/bootstrap.min.js"></script>
</body>
</html>
Kode diatas save dengan nama index.php dan jangan lupa saya disini menggunakan framework bootstrap kalian harus download sendiri ya.
Kemudian buat 2 folder baru admin dan user seperti gambar dibawah ini ...
Kemudian dimasing - masing folder kalian buat lagi 3 file yaitu index.php, config.php dan cek_admin.php / cek_user.php. Gunanya adalah agar ketika login sebagai admin kalian akan dilempar kedalam page khusus admin begitu pula jika kalian login sebagai user biasa kalian akan dilempar ke halaman user biasa.
config.php sama saja buat di folder user dan admin
<?php
$conn=mysqli_connect("localhost","root","","final")or die("Can't Connect...");
?>
$conn=mysqli_connect("localhost","root","","final")or die("Can't Connect...");
?>
cek_admin.php
<?php
session_start();
//cek apakah user sudah login
if(!isset($_SESSION['username'])){
die("Anda belum login");//
}
//cek level user
if($_SESSION['peran']!="admin")
{
die("Anda bukan admin");
}
?>
session_start();
//cek apakah user sudah login
if(!isset($_SESSION['username'])){
die("Anda belum login");//
}
//cek level user
if($_SESSION['peran']!="admin")
{
die("Anda bukan admin");
}
?>
cek_member.php
<?php
session_start();
//cek apakah user sudah login
if(!isset($_SESSION['username'])){
die("Anda belum login");//
}
//cek level user
if($_SESSION['peran']!="member")
{
die("Anda bukan member, reg first!");
}
?>
session_start();
//cek apakah user sudah login
if(!isset($_SESSION['username'])){
die("Anda belum login");//
}
//cek level user
if($_SESSION['peran']!="member")
{
die("Anda bukan member, reg first!");
}
?>
index.php untuk indexnya kalian bisa sesuaikan saja
<!DOCTYPE html>
<html>
<head>
<title>INI PAGE ADMIN/USER</title>
</head>
<body>
<p> SELAMAT DATANG ADMIN/USER </p>
</body>
</html>
<html>
<head>
<title>INI PAGE ADMIN/USER</title>
</head>
<body>
<p> SELAMAT DATANG ADMIN/USER </p>
</body>
</html>
Setelah semuanya selesai, coba jalankan dan coba login menggunakan kedua usernya yang sudah dibuat tadi...
Admin :
username : admin | password : admin
User :
username : rezkycpp | password : rezkycpp
Sekian dan terima kasih, semoga bermanfaat !!!
Membuat Sistem Login Multi Level User dengan PHP, Bootstrap dan Database MySQL
Posted by RZDev: Belajar Programming! on Monday, February 5, 2018
Berikuti ini merupakan contoh project sederhana yang kami rancang untuk tugas besar mata kuliah mikroprosesor. Project arduino uno dengan rangkaian fritzing - Light Alarm.
Light alarm merupakan yang rangkaian yang bekerja dengan sensor buzzer/resistor foto, saat LEDs merah berkedip terus dan ketika lampu dimatikan, maka alarm akan berbunyi di ikuti dengan nyala LEDs hijau + merah di belakangnya. Project ini terinspirasi dari Light Activated Alarm by HailStorm.
Project ini memiliki tingkat kesulitan yang rendah, jadi bagi kalian yang masih pemula dapat menerapkannya dengan mudah. Untuk perangkat - perangkat yang dibutuhkan dalam merancang rangkaian ini adalah sebagai berikut :
- 1 Arduino Uno
- 1 Prototype Shield (boleh ada boleh tidak)
- 12 Kabel
- 1 Breadboard
- 1 Buzzer 12mm
- 2 Red LEDs 3mm
- 1 Green LEDs 3mm
- 1 Photo Resistor
- 3 10k Ohm Resistor
- 1 1k Ohm Resistor
Jika semua alat sudah ada maka selanjutnya kalian rangkai menjadi rangkaian seperti gambar dibawah ini :
Untuk project lengkapnya berisi (coding + rangkaian pada software Fritzing) dapat kalian download disini
Sekian, semoga bermanfaat dan semoga tugasnya terbantu.
Contoh Project Arduino Uno Sederhana + Rangkaian Fritzing (Light Alarm)
Posted by RZDev: Belajar Programming! on Tuesday, January 16, 2018
Perkembangan smartphone jaman sekarang sangat pesat, seperti yang kita ketahui sendiri smartphone menjadi kebutuhan primer sekarang ini. Hampir setiap orang dari semua kalangan memiliki smartphone di tangan mereka. Baik smartphone high-end hingga low-end. Berbagai macam smartphone sudah di rilis dengan fitur - fitur andalan mereka, jika kita melihat di masa lalu kalian pasti akan kenal dengan smartphone BlackBerry. BlackBerry merupakan cikal - bakal ponsel pintar yang kalian gunakan sekarang ini, pada masanya hanya BlackBerry-lah yang mempunyai fitur "PUSH Mail".
Push Mail, merupakan fitur yang berfungsi untuk mengeluarkan notifikasi secara otomatis jika ada email yang masuk. Dahulu kebanyakan orang harus mencek secara manual email yang masuk namun tidak dengan BlackBerry. Hal tersebut membuat ponsel pintar BlackBerry menjadi booming hingga ditambahkan fitur "Instant Message BBM". BBM membuat blackberry semakin laku keras di pasar global, hal tersebut membuat mungkin membuat blackberry hanya berfokus pada marketing namun mereka tidak menyadari munculnya para pesaing yang akan menggeser mereka seperti IPhone dan Android dari Google. Selengkapnya akan dibahas pada slide dibawah ini :
Semoga bermanfaat dan semoga tugasnya terbantu
Presentasi Tentang Operasi Sistem BlackBerry
Posted by RZDev: Belajar Programming! on Monday, January 15, 2018
Selamat malam, sekarang kita akan belajar bagaimana cara membuat form di HTML 5, form kali ini hanya form dasar atau form yang sangat sederhana. Kalian dapat kembangkan lagi syntaxnya agar menjadi form yang lebih kompleks.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Form HTML 5</title>
</head>
<body>
<h1> Example Form</h1>
<p>Please fill out this form to help us improve our site.</p>
<form method = "post" action = "http://www.rezkycpp.com">
<input type = "hidden" name = "recipient" value = "www.rezkycpp.com">
<input type = "hidden" name = "subject" value = "FeedBack Form">
<input type = "hidden" name = "redirect" value = "index.html">
<p><label>Name:
<input name = "name" type = "text" size = "25" maxlength = "30">
</label></p>
<p>
<input type = "submit" value = "Submit">
<input type = "reset" value = "Clear">
</p>
</form>
</body>
</html>
<html>
<head>
<meta charset = "utf-8">
<title>Form HTML 5</title>
</head>
<body>
<h1> Example Form</h1>
<p>Please fill out this form to help us improve our site.</p>
<form method = "post" action = "http://www.rezkycpp.com">
<input type = "hidden" name = "recipient" value = "www.rezkycpp.com">
<input type = "hidden" name = "subject" value = "FeedBack Form">
<input type = "hidden" name = "redirect" value = "index.html">
<p><label>Name:
<input name = "name" type = "text" size = "25" maxlength = "30">
</label></p>
<p>
<input type = "submit" value = "Submit">
<input type = "reset" value = "Clear">
</p>
</form>
</body>
</html>
Nah itu tadi script untuk "cara membuat form sederhana di HTML 5", semoga dapat membantu tugasnya, sukses selalu!
Berikut beberapa input type yang sering digunakan di HTML 5
Berikut syntaxnya, semoga bermanfaat dan lancar buat tugasnya
<!DOCTYPE html>
<!-- Fig. 3.1: newForminputtypes.html -->
<!-- Di ketik oleh rezkycpp -->
<html>
<head>
<meta charset="UTF-8">
<title>Latihan web desain</title>
</head>
<body>
<h1> New HTML5 Input types Demo</h1>
<p>This form demonstrates the new HTML5 input types and the placeholder, required and autofocus attributes
</p>
<form method="post" action="http://www.deitel.com">
<p>
<label>Color:
<input type = "color" autofocus />
(Hexadecimal code such as #ffffff)
</label>
</p>
<p>
<label>Date:
<input type ="date" />
(yyyy-mm-dd)
</label>
</p>
<p>
<label>Datetime-local:
<input type = "datetime-local"/>
(yyyy-mm-ddThh:mm+ff:gg, such as 2012-01-27T03:15)
</label>
</p>
<p>
<label>Email:
<input type ="email" placeholder ="nama@domain.com" required />
(nama@domain.com)
</label>
</p>
<p>
<label>Month:
<input type ="month" /> (yyyy-mm)
</label>
</p>
<p>
<label>Number:
<input type = "number"
sin ="0"
max ="7"
step="1"
value="4"/>
</label> (enter a number between 0 and 7)
</p>
<p>
<label>Range: 0
<input type = "range"
min = "0"
max = "20"
value = "10"/> 20
</label>
</p>
<p>
<label>Search:
<input type = "search" placeholder = "search query"/>
</label> (enter your search query here.
</p>
<p>
<label>Tel:
<input type = "tel" placeholder = "(###) ###-####" pattern = "\(\d{3}\)+\d{3}-\d{4}" required />
(###) ###-####
</label>
</p>
<p>
<label>Time:
<input type = "time" /> (hh:mm:ss.ff)
</label>
</p>
<p>
<label>URL:
<input type = "url" placeholder = "http://www.domainname.com" />
(http://www.domainname.com)
</label>
</p>
<p>
<label>Week:
<input type = "week" />
(yyyy-Wnn, such as 2012-W01)
</label>
</p>
<p>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</p>
</form>
</body>
</html>
<!-- Fig. 3.1: newForminputtypes.html -->
<!-- Di ketik oleh rezkycpp -->
<html>
<head>
<meta charset="UTF-8">
<title>Latihan web desain</title>
</head>
<body>
<h1> New HTML5 Input types Demo</h1>
<p>This form demonstrates the new HTML5 input types and the placeholder, required and autofocus attributes
</p>
<form method="post" action="http://www.deitel.com">
<p>
<label>Color:
<input type = "color" autofocus />
(Hexadecimal code such as #ffffff)
</label>
</p>
<p>
<label>Date:
<input type ="date" />
(yyyy-mm-dd)
</label>
</p>
<p>
<label>Datetime-local:
<input type = "datetime-local"/>
(yyyy-mm-ddThh:mm+ff:gg, such as 2012-01-27T03:15)
</label>
</p>
<p>
<label>Email:
<input type ="email" placeholder ="nama@domain.com" required />
(nama@domain.com)
</label>
</p>
<p>
<label>Month:
<input type ="month" /> (yyyy-mm)
</label>
</p>
<p>
<label>Number:
<input type = "number"
sin ="0"
max ="7"
step="1"
value="4"/>
</label> (enter a number between 0 and 7)
</p>
<p>
<label>Range: 0
<input type = "range"
min = "0"
max = "20"
value = "10"/> 20
</label>
</p>
<p>
<label>Search:
<input type = "search" placeholder = "search query"/>
</label> (enter your search query here.
</p>
<p>
<label>Tel:
<input type = "tel" placeholder = "(###) ###-####" pattern = "\(\d{3}\)+\d{3}-\d{4}" required />
(###) ###-####
</label>
</p>
<p>
<label>Time:
<input type = "time" /> (hh:mm:ss.ff)
</label>
</p>
<p>
<label>URL:
<input type = "url" placeholder = "http://www.domainname.com" />
(http://www.domainname.com)
</label>
</p>
<p>
<label>Week:
<input type = "week" />
(yyyy-Wnn, such as 2012-W01)
</label>
</p>
<p>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</p>
</form>
</body>
</html>
Berikut Beberapa Input Type yang ada di HTML 5
Posted by RZDev: Belajar Programming! on Saturday, January 13, 2018
Well, sekarang kita akan membahas struktur dasar dari HTML 5, HTML 5 sendiri merupakan perkembangan dari HTML, di HTML 5 kita dapat menambahkan fitur - fitur seperti SVG, canvas & grafik sedangkan di HTML terdahulu kita hanya dapat menambahkan fitur seperti itu melalui flash, vml, silver-light.
Struktur khas dari HTML 5 adalah <!DOCTYPE html>. Jadi sangat mudah untuk mengidentifikasi website yang menggunakan HTML 5 atau tidak.
Posts
