Selasa, 21 September 2021

Membuat meja dengan blender

 Cara membuat meja 3D dengan Blender. Berikut langkah langkahnya:

  • Pertama Buka apk Blender-nya di laptop anda.
  • Lalu Klik File-New, atau jalan pintasnya menekan tombolCtrl+n.
    berikut gambarnya.
    Pertama masuk terdapat bentuk kubus itulah bahan dasar terlebih dahulu. Seleksi pada objek pada kubus Klik Kanan Mouse – KLik huruf S yang terdapat pada keyboard, setelah itu atur arah sumbu dengan huruf Y/X/Z. 
    agar kubus tersebut jadi tipis dan panjag S+Y S+Z untuk melebarkan objek hingga membentuk papan.
  • Kemudian kita mulai mengedit papan terlebih dahulu,untuk masuk edit mode tekan saja Tab yang terdapat pada keyboard.hingga warna objek jadi kuning.
  • setelah itu kita buat garis untuk membuat garis yang akan kita buat. awalnya kita buat garis yang searah dengan sumbu Z  dan menekan keybord ctrl +r kemudian gunakanlah scrool pada mouseuntuk membentuk garis. bila selesai klik  enter.
    buatlagi searah sumbu Y  caranya sama dengan yang Z.
  • untuk membuat kaki kaki mejanya kita harus menyeleksi bagian yang dipilih menggunakann Ctrl+tab . setelah itu seleksi tiap sudut objek kaki untuk membuat kaki perintahnya tekan tombol Shift + klik kanan mouse.
  • setelah sudut kaki terseleksi tarik dengan tekan tombo E sekali saja.
    sudah jadi
    Kita kembalikan lagi pada objek mode dengan menekan tombol tab .
  • setelah itu kita beri warna BG-nya agar terlihat cantik , dengan cara klik Word dikanan layar atas.
  • dan langkah berikutnya adalah kita render.untuk merender klik render-render images. pake jalan pintasnya tekan f12 untuk melihat hasilnya.

setelah itu di save .

Kamis, 16 September 2021

Membuat Form pada HTML

 Form dalam web bisa disamakan dengan formuliar di dunia nyata.

Form dapat diisi, kemudian diproses dengan program tertentu.

Pada tutorial ini, kita akan belajar cara membuat form di HTML.

Hanya membuat saja ya…

Tidak sampai memproses datanya.

Karena itu masuk ke dalam topik pembahasan yang lain.

Baiklah…

Mari kita mulai.

Cara Membuat Form di HTML

Form di HTML dapat kita buat dengan tag <form>.

Tag ini memiliki beberapa atribut yang harus diberikan, seperti:

  • action untuk menentukan akasi yang akan dilakukan saat data dikirim;
  • method metode pengiriman data.

Contoh:

<form action="prosess.php" method="GET">
<!-- form field di sini -->
</form>

Untuk atribut action, kita dapat mengisinya dengan alaman URL dari endpoint yang akan memproses form.

Secara sederhana,—pada contoh di atas— kita akan menyuruh file prosess.php untuk memproses data form.

Ini nanti akan kita pelajari pada PHP.

Kode HTML di atas, tidak akan menghasilkan apa-apa.

Karena kita belum membuat field-nya.

Apa itu Field?

Field adalah ruas yang dapat diisi dengan data.

Contoh field:

<input type="text" name="info" />

Field memiliki beberapa atribut yang harus diberikan:

  1. type merupakan type dari field.
  2. name merupakan nama dari field yang akan menjadi kunci dan variabel di dalam program.

Latihan: Membuat Form Login

Sebagai latihan, mari kita buat form login.

Pada form login, terdapat beberapa field dan elemen:

  1. Field untuk input username atau email;
  2. Field untuk input password;
  3. Checkbok untuk remember me;
  4. Tombol untuk login.

Berikut ini kodenya:

<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Hasilnya:

Form login dengan HTML

Sekarang perhatikan!

Pada kode di atas, kita membuat empat buah filed:

  1. input username dengan tipe text;
  2. input password dengan tipe password;
  3. input remember dengan tipe checkbox;
  4. input submit dengan tipe submit;

Lalu ketiga filed ini dibungkus ke dalam tag <fieldset>.

Nanti tag <fieldset> ini akan membuat sebuah garis.

Di dalam tag <fieldset>, kita membuat tag <legend> untuk memberikan teks pada fieldset.

Lalu, perhatikan juga atirbut yang digunakan pada setiap field.

  • Atribut placeholder untuk menampilkan teks sementara (placeholder);
  • Atribut value untuk membreikan nilai default pada field.

Setiap field kita bungkus dalam tag <p> agar terlihat rapi dan juga kita berikan sebuah label dengan tag <label>.

Latihan: Membuat Form Contact

Latihan Selanjutnya, kita akan membuat form contact. Form ini berfungsi untuk menghubungi atau kontak admin.

Silahakan ikuti kode berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Contact</legend>
        <p>
            <label>Name:</label>
            <input type="text" name="name" placeholder="your name..." />
        </p>
        <p>
            <label>Subject:</label>
            <input type="text" name="subject" placeholder="subject..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="your email..." />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Hasilnya:

Form Contact dengan HTML

Pada contoh di atas, kita memberikan type="email" untuk field email, agar filed ini harus diisi dengan email saja.

Coba saja isi dengan yang lain, lalu klik Send…maka akan muncul pesan peringatan.

Form contact error

Latihan: Membuat Form Register

Semakin banyak latihan, semakin bagus.

Berikutnya kita akan coba membuat form registrasi.

Form ini berisi field untuk:

  • Input nama lengkap;
  • Input username;
  • Input email;
  • Input password;
  • Input jenis kelamin;
  • Input Agama;
  • Input Biografi.
  • dsb.

Mari kita buat…

<!DOCTYPE html>
<html>
<head>
    <title>Registrasi</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Registrasi</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Nama lengkap..." />
        </p>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Username..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Your email..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Passowrd..." />
        </p>
        <p>
            <label>Jenis kelamin:</label>
            <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
        </p>
        <p>
            <label>Agama:</label>
            <select name="agama">
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="hindu">Hindu</option>
                <option value="budha">Budha</option>
            </select>
        </p>
        <p>
            <label>Biografi:</label>
            <textarea name="biografi"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="Daftar" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Hasilnya:

Form register dengan HTML

Apa saja field baru yang ada di form tersebut?

  1. Field radio;
  2. Field <select><option>;
  3. Field <textearea>.

Apa bedanya radio dengan checkbox?

Jika kita ingin agar pengunjung memilih salah satu, maka kita gunakan radio.

Tapi kalau kita ingin pengunjung memilih lebih dari satu, maka kita gunakan checkbox.

Lalu untuk <select></option>, sifatnya sama seperti radio. Cuma dia bentuknya berbeda.

Lalu untuk menginputkan teks yang panjang, kita gunakan tag <textarea>.

Latihan: Membuat Form Tingkat Lanjut

Field-field di atas merupakan jenis field yang sering digunakan dalam pembuatan form.

Masih ada jenis field lagi yang belum kita coba, seperti metercolorurlnumberdatedatetime, dsb.

Mari kita coba beberapa:

<!DOCTYPE html>
<html>
<head>
    <title>Form HTML</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Form</legend>
        <p>
            <label>Alamat Web:</label>
            <input type="url" name="name" placeholder="Masukan URL Web..." />
        </p>
        <p>
            <label>Tanggal Lahir:</label>
            <input type="date" name="tanggal" />
        </p>
        <p>
            <label>Umur:</label>
            <input type="number" min="10" max="90" name="umur" />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Hasilnya:

Form dengan tipe field yang lain

Apabila di browser anda tidak tampil kalender seperti di atas, coba gunakan browser versi terbaru

Selasa, 14 September 2021

Membuat tombol Back dan Next dengan Action Script 3.0

 

Pada Materi Kita Kali ini kita akan membuat menu navigasi Back dan Next menggunakan Action Script 3.0. Dengan menggunakan Software Adobe Animate.


Pertama tama Disini Admin mengasumsikan bahwa kita sudah biasa menggambar atau membuat tombol. Buatlah dua buah Tombol Back dan Tombol Next, dengan memanfaatkan menu pada Tool Box. 
Setelah Selesai Menggambar Jangan lupa untuk melakukan convert objek menjadi symbol dengan Type Button dengan Registration tengah.


Selanjutnya pilih tombol back, kemudian lihat panel properties, beri nama pada instance name dengan nama tombol_back. Lakukan hal yang sama pada tombol next, beri nama pada instance name dengan nama tombol_next


Tambahkan 3 layer baru, dengan cara menekan icon New Layer.

Ubah Nama layer dengan cara klik layer dua kali kemudian layer_1 diganti menjadi navigasi, layer_2 diganti menjadi materi, layer_3 diganti menjadi Action_Script.


Pilih Frame 1 Layer Materi, Kemudian buatlah tulisan Ini adalah Layer 1.


Pilih Frame 2 Layer Materi, Kemudian Klik Kanan Pilih Convert to Keyframe dan ganti tulisan menjadi tulisan Ini adalah Layer 2. Lanjutkan sampai Frame 5 pada layer Materi dengan cara sama seperti diatas.

Setelah selesai melakukan tahap diatas, Klik/pilih Frame 5 pada Layer Tombol_Navigasi, Kemudian lakukan Klik kanan pilih Insert Frame


Setelah selesai melakukan tahap diatas, lanjutkan membuat Action Script nya agar nantinnya tombol bisa berfungsi. Klik Kanan Frame 1 Layer Action_Script, Kemudian Pilih Actions. Ketik atau Copy Paste Action Script dibawah ini.

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  1. stop();
  2.  
  3. //untuk fungsi tombol back
  4.  
  5. tombol_back.addEventListener(MouseEvent.CLICK, klik_back);
  6. function klik_back(e:MouseEvent):void
  7. {
  8.     prevFrame();
  9. }
  10.  
  11. //untuk fungsi tombol next
  12. tombol_next.addEventListener(MouseEvent.CLICK, klik_next);
  13. function klik_next(e:MouseEvent):void
  14. {
  15.     nextFrame();
  16. }


Lakukan test movie dengan cara menekan CTRL+ENTER pada Keyboard untuk melihat hasilnnya.