QR NOTES : Tutorial Java Web ZK Framework Create Form Login SQL Server For Beginner

Surely you are familiar with the login form. This form usually asks for the user's username and password before entering the online service. Display the login form itself is quite simple. But did you know that login forms can look awesome too?

In this article, you will find out how to create a login form with ZK Framework and CSS. ZK Framework serves to create web pages and the structure of the login form. While CSS to design the appearance of the login form.

Can't wait to find out how to create a login form with ZK Framework and CSS? Let's look at the following explanation.

What do you need to prepare?

Before creating a cool login form with ZK Framework and CSS, there are two things you need to prepare, namely:

Text Editor. A text editor is a software or computer program for writing program code. Use the text editor that makes you most comfortable. Can Eclipse, Visual Code Studio, Netbeans and others.

Browsers. The browser functions to view the results of the login form that you have created. You are free to use the best browsers such as Chrome, Mozilla Firefox, or any other browser.

A. CREATE FORM LOGIN (ZK FRAMEWORK SQL SERVER)

Running Web localhost:8080/apps

Design Login.zul

<?page title="Login" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="FORM LOGIN ZK FRAMEWORK" border="normal" position="center" mode="overlapped" id="wndlogin" use="com.apps.login">
<div width="300px" height="100px">
<grid>
    <columns>
        <column width="50%"></column>
        <column width="50%"></column>
    </columns>
    <rows>
        <row>    
            <label value="USER ID"></label>    
            <label value="PASSWORD"></label>    
        </row>        
        <row>    
            <textbox id="iduser"></textbox>    
            <textbox id="pass"> </textbox>    
        </row>
        <row>      
	     <button id="submit" label="LOGIN" onClick="wndlogin.login(iduser.getValue(),pass.getValue())"></button>    
        </row>
    </rows>
</grid>
</div>
</window>
</zk>

Code Login.java

package com.apps;
import java.sql.Connection;
import java.sql.ResultSet;import java.sql.Statement;import org.zkoss.zul.*;import org.zkoss.zk.ui.Executions;import org.zkoss.zul.Messagebox;import com.apps.db.DBSQLConnection;
public class login extends Window {    String SQL;        public void login(String user, String pass)throws Exception {            String cPass=null;            SQL="SELECT * FROM LOGIN WHERE IDUSER='"+user+"'";            Connection Conn = new DBSQLConnection().openConnection();            Statement st = Conn.createStatement();            ResultSet rs = st.executeQuery(SQL);            while (rs.next()){                    cPass=rs.getString("password").toUpperCase().toString().trim();            }
            rs.close();    
            Conn.close();            if (pass.trim().toUpperCase().equals(cPass)){                Executions.getCurrent().sendRedirect("content/","_self");            }else {                Messagebox.show("User & Password Inccorect !!!","Error Message",Messagebox.OK,Messagebox.ERROR);            }
        }
}