zonakode.com: HTML

Showing posts with label HTML. Show all posts

Monday, 22 May 2017

Membuat Segitiga - Tabung (OpenGL di Linux)

20:34:00 – by programmer 0

Assalamualaikum w,w,.
Kali ini saya mulai menulis artikel tentang kode lagi setelah sekian lama berhenti dari ngeblog :D, ini pu terpaksa. karena males masih pakai blogspot gak TLD hehehe. Oke Langsung saja apa sih OPENGL Itu.

OpenGL adalah kumpulan standard API (Application Programming Interface) yang menghubungkan software dengan hardware grafis untuk menampilkan gambar 2D dan 3D. Intinya OpenGL itu adalah kumpulan library untuk mengakses hardware (GL= graphical library).

nah jadi gitu.. apa sih Tujuan nya kok ada openGL .

OpenGL Bertujuan melakukan rendering objek-objek dua dimensi dan tiga dimensi berupa susunan vertex atau pixel ke dalam frame buffer.

nah itu dia..

mudeng kan..

Langsung aja ini source code buat Segitiga - Tabung + Translate +rotated nya.

#include <GL/gl.h>

#include <GL/glut.h>

#include <stdarg.h>

#include <math.h>

// kompile gcc -lglut -lGL -lGLU -lGLEW -lm post9.c -o post9

// ./post9

int i=0;

void bunder(void){

glClear(GL_COLOR_BUFFER_BIT);

glBegin(GL_LINE_LOOP);

float x0=0;

float y0=0;

float r=35;

float sudut;

float pi=3.14;

int jt=90;

glBegin(GL_LINE_LOOP);

for(int i=0; i<=360;i++){//selimut

sudut=i*(2*pi/jt);

float x=x0+r*cos(sudut);

float y=y0+r*sin(sudut);

glVertex3f(0,0,0.9);

glVertex3f(x/150,y/150,0.4);

glVertex3f(x/150,y/150,0.4);

glVertex3f(x/150,y/150,0);

glVertex3f(x/150,y/150,0);

glVertex3f(0,0,-0.5);

}

glEnd();

glFlush();

}

void muter(int value){

i=i+5;

glutPostRedisplay();

glutTimerFunc(50,muter,value);

}

void geser(){

glPushMatrix();

glRotated(90,1,0,0);

// glRotated(i,1,i,1); Kesamping

glRotated(i,i,1,1);

glTranslated(0,0.5,0);

glTranslated(0.1,0,0);

bunder();

glPopMatrix();

}

int main(int argc, char** argv){

glutInit(&argc, argv);

glutCreateWindow("Eko | 1500018031");

glutDisplayFunc(geser);

glutTimerFunc(50,muter,1);

glutMainLoop();

}

Nanti Hasilnya Seperti di Video ini :

Membuat Segitiga - Tabung (OpenGL di Linux)

Sunday, 7 August 2016

Cara membuat validasi email

18:55:00 – by Unknown 0

Assalamualaikum wr wb,
Hay jumpa lagi dengan zonakode temukan tutorial hanya di zonakode.bg.com, Kali ini saya akan membahas tentang bagaimana cara membuat validasi email. yang sering kita gunakan ketika login atau membuat from saran dll, bisa di terapkan di mana saja.
asalkan kreatif ya.. sebelum membahas tentang validasi kita memahami tentang javascript ya walaupun sedikit yang penting kita sudah tau dasar dasar javascript itu sendiri.

oke langkah pertama kita membuat javascriptnya dulu, kalau temen temen bingung bisa liat videonya disini .
dan saya menggunakan aplikasi Atom.exe download di google.com banyak.

ini kodenya :

<html>
    <head>
        <title>Validasi</title>
        <script type="text/javascript">
        function Validasi(){
          //PEngambilan data darri from eko -> name=masing-masing 1
                var email=document.eko.email.value;
                var nama=document.eko.nama.value;
                var pass=document.eko.pass.value;
                //sampe ini 1
                //validasi from yang kosong tidak boleh ada yang kosong
                if (email=="" || nama=="" || pass==""){
                  alert("Form Harus Lengkap");
                }
                //validasi email menentukan benar salahnya email
                if ((email.indexOf('@',0)==-1) || (email.indexOf('.',0)==-1)){
                  alert("Email Salah");
            }

return true;
          }
        </script>
        
    <style media="screen">
    *{
      padding: 40,40,40,40;
      margin: 0;
    }
      #main{
        width: auto;
        height: auto;;
        background-color: #747809;
        float: left;
      }
    </style>
    </head>
    <body>
      <center>
        
      <div id="main">
        <form action="" name="eko" method="post" onsubmit="return Validasi();">
            <table align="center">
<tr>
                <td>From CONTOh</td>
              </tr>
<tr>
                <td>Nama </td>
                <td><input type="text" name="nama" placeholder="Nama"></td>
              </tr>
<tr>
                    <td>Email </td>
                    <td><input type="text" name="email" placeholder="Masukan email"></td>
                </tr>
<tr>
                  <td>Password</td>
                  <td>
                    <input type="password" name="pass" placeholder="Masukan Password">
                  </td>
                </tr>
<tr>
                    <td><input type="submit" name="submit" value="Kirim"></td>
                </tr>
</table>
</form>
</div>
</center>
</body>
</html>

tampilanya standar yang penting di validasinya:

penjelasan sudah saya letakkan di dalam kode tersebut , sebagai proggramer kita harus think smart,
jika salah akan ada alert seperti di bawah ini :

jika benar akan diam karena di form actionnya saya kosongi supaya anda bisa berkreasi sendiri sesuai selera ,, terimakasih.

Wassalamualaikum wr wb

Monday, 13 June 2016

Membuat Table

20:01:00 – by programmer 1

Assalamualaikum w w w hay guys.. sambil ngabuburit kita blajar membuat table aja yok.. meskipun ini hal yan sepele tetapi kita harus mengerti tentang rowspan dan colspan nah apa sih fungsi dari rowspan dan colspan... dari fungsi nya dulu ya baru kita mnyimpulkan pengertianya.. oke langsung aja praktikum :D
note : tabel asli :

kolom 1	kolom 2
Nama	Eko Prasetio
blog	Http://zonakode.blogspot.com
Alamat	Yogyakarta

Source Kode:

1. ROWSPAN untuk menggabungkan baris. berikut contohnya:

kolom 1	kolom 2
2 BARIS	Eko Prasetio
2 BARIS	Http://zonakode.blogspot.com
Alamat	Yogyakarta

Source Kode :

2. COLSPAN untuk menggabungkan kolom Di pahami ya gaess

INI Penggabungan 2 kolom
Nama	Eko Prasetio
Blog	Http://zonakode.blogspot.com
Alamat	Yogyakarta

Source kode :

semoga bermanfaat, yang kurang jelas bisa bertanya tanya di komentar okeee,,, sekian dari saya wasalamualaikum w w w.

Sunday, 12 June 2016

Menampilkan video youtube di MAX OS

23:59:00 – by programmer 0

Assalamualaikum w w w
jumpa lagi bersama saya admin zonakode.. seperti judulnya saya akan membuat layout untuk meletakkna
vedio youtube supaya terlihat seperti di dalam gambarnya ini contohnya..

DEMO

oke pertama kita buat : htmlnya.

    1. buat file baru beri nama index.html
        isi dengan kode :
        pahami juga kodenya.. kalau tidak tahu bisa tanya di komen.



2. masih di index.html
        taru kode berikut di bawah <title>zonakode.blogspot.com</title>.
   kodenya :



dan seleai jadinya seperti gambar di atas.. semoga bermanfaat jangan lupa komen supaya tau.. walaikumsalam w w w

Cara membuat kalkulator berbasis web

14:55:00 – by programmer 0

Assalamualaikum
Jumpa lagi bersama zonakode , masih sehat kan puasanya hehe...
kaliini saya akan membuat kalkulator berbasis web. hem gak tau kan pasti :D
biasanya program kalkulator ini berbasis c++,java atau netbean yang artinya sangat tidak familiar lagi
oke gak usah lama lama lagi kita akan membuat tutorial cara membuat kalkulator berbasis web.
disini saya membuat hanya satu halaman saja.. jika mau mengkreasikan lagi juga gak papa, tergantung selera.

ikuti langkah langkahnya oke...

1. buat file baru beri nama index.html / home.html
   isi dengan kode :


2. membuat layout / tampilan untuk meng inputkan dan meng outputkan Hasilnya.
    letakan di bawah <body> . di pahami juga tentang atributnya name,type,onclick, dan placeholder.
    isi dengan kode :

3. Sekarang Kita membuat fuctionya. ini penting bahkan paling penting, karena script ini yang aka memprosesnya.
    pelajari juga penamaanya sama kodekodenya setiap baris.. oke..
    membuat satu function juga bisa tetapi saya memilih membuat menjadi dua karena lebih mudah di pahami oleh pemula
    dan tujuan saya membuat anda paham.

    Letakan di bawah <title>Disini Judul </title>.
    berikut kodenya :

4. Selesai berikut jadinya :

ss hasil :

note :
PAHAMI KODE DI ATAS JIKA SUDAH PAHAM ANDA BISA MULAI MEMPERANTIK TAMPILAN.
Seperti gambar di bawah ini

LINK KODE

sekian tutorial dari saya semoga bermanfaat jika mau tanya tanya silahkan komen.
wassalamualaikum w w w.

Wednesday, 8 June 2016

Design Web Menggunakan Layoutit

20:26:00 – by programmer 0

Cara membuat layout dengan layoutit

assalamualaikum w w w
Alhamdulilah masih kuat puasanya .. oke langsung aja setelah artikel sebelumnya membahas tentang bagaimana cara mendesign layout dengan pengindo.
sekarang cara mendesign dengan www.layoutit.com

berikut vidionya : nice jangan lupa subscribe

nah begitu guys caranya.. silahkan di kreasikan sendiri.. dan tetap semangat buat buildweb nya

oke sekian dulu dari saya
wassalamualaikum w w w.

Monday, 6 June 2016

Membuat Layout Dengan Pengindo

21:10:00 – by programmer 0

Assalamualaikum w w w

Masih sehat kan setelah berpuasa seharian hehe puasa pertama sukses semua kan, semoga sukses guys..
oke kali ini saya akan membahas tentang WEB nah sebelum memualai seperti biasa saya akan menjelaskan tentang web.
Ahh Pasti sudah tau semua kan Web?? Gaktau Katrok lu :D,
Web atau website adalah suatu halaman (site) yang saling terhubung a tara satu dengan yang lainya, yang berisikan informasi informasi
yang diisi oleh pembuatnya sendiri. nah begitu website namanya, Pertanyaanya adalah gimana caranya kita membuat website ? nahh penasaran kan caranya :D sabar artikel selanjutnya dan selanjutnya kita membuatnya tapi secara urut dari awal hingga akhir makanya ikuti terus hanya di WWW.ZONAKODE.BLOGSPOT.COM ... kali ini saya akan MEMBUAT LAYOUT DENGAN PENGINDO. Pengindo adalah sofware gratisan untuk membuat web dengan base Bootstrap, Ah kayaknya kali ini kurang menantang karena kita akan di manjakan dengan drag and drob huhuhu, kita hampir gak mikir :D tapi logika harus tetap jalan ya :D..

Sebelumnya Download dulu Softwarenya yang terbaru ya.
Pengindo : DOWNLOAD
Software : Free (Online)
Base : Bootstrap

Atau

Design Online
Layoutit : MAMPIR SINI
Software : Online
Base : Bootstrap
CARANYA : Liat Disini Untuk LayoutIT

Jika sudah Mari pulang :D... Mari ke tahap design guys nanti bedakan ya Gampangan Mana (y)

Step 1 :

1. Buka Aplikasinya ohya pertama hidupin dulu koneksinya ketika mau masuk. setelah masuk matiin koneksi gak papa tapi kalau mau save hidupin lagi gays :D . karena disini memerlukan koneksi.
muncul kaya gambar berikut :

2. Klik aja "Klik here to create a new page..."
3. Nah disitu ada 2 plihan "Default empity Page" dan "Landing Page". terserah mau pilih yang mana. kalau saya pilih yang empity biar greget :D

4. Nah akan ada lembaran baru :D

Step 2 : Membuat Layout atau bagian bagian tertentu sesuai kita.

1. membuat menu navigasi + bacgroun image + fix-top+coonten+footer

drag and drob ke layout setelah selesai.
    klik yang bertuliskan (klik lingkaran merah)
    pilih bacground
    klik nav nya dan ganti class nya jadi "navbar-fixed-top"

Seperti gambar berikut :