Computer Science BSc Java programming Presentation 8 Dr
Computer Science BSc: Java programming Presentation 8 Dr. Gábor Pauler, Associate Professor, PTETTK, Room F 104, 6 th Ifjusag str. Pecs, Hungary Skype: gjpauler E-mail: pauler@t-online. hu Facebook and Open FTP sites of the course: https: //www. facebook. com/groups/574936103087671/ ftp: //gamma. ttk. pte. hu/pub/pauler/Java/
Content of the Presentation 11. Frontend-to-Backend MVC development 11. 1. Sample project 11. 2. Basic definitions 11. 3. Creating login without registration 11. 3. 1. Frontend login page 11. 3. 2. User Servlet 11. 3. 3. User Service 11. 3. 4. felhasznalok database table 11. 3. 5. Stored procedures 11. 3. 6. Felhasznalok model class 11. 4. Creating login with registration 11. 4. 1. Sample project 11. 4. 2. Frontend page 11. 4. 3. User. Servlet 11. 4. 4. User. Service 11. 4. 5. Database table 11. 4. 6. Stored procedures 11. 4. 7. Generating model class References
11. Frontend-to-Backend MVC development 11. 1. Sample projects: See Kezilabda 1 Java web application, felhasznalok (users) table of kezilabda 1 XAMPP My. SQL Maria. DB database, See LDDAnim Java web application, user table of lddanim XAMPP My. SQL Maria. DB database. 11. 2. Basic definitions: Frontend-to-Backend developements are originated in improving badly served user requirements Or, updating the application to changing user requirements Also, it can be a symptom of ill-designed Scrum It starts from modifying a GUI prototype and moves the cange along backend layers towards the database Therefore it allows easier requirement definition for Business owner (anyone can more easily criticise an existing than draw something correctly from white paper) It allows Rapid GUI Prototyping (Prototípus): demonstration and User Acceptance Test of GUI layout without really working functions But it requires more experienced Scrum master a development team, because they modify/create new web GUI HTML elements, without having real content behind them on backend, only an Interface (Interfész) definition: properties and method headers with I/O variables of a class Coding is done amidst syntax error signals, because of the still missing preconditions in backend layers, which will be written later
11. Front→Back MVC: 11. 3. Login: 11. 3. 1. Frontend HTML-JS 11. 3. 1. Frontend login page 11. 3. 1. 1. Creating HTML login page: Net. Beans|FRM: Projects|LIN: Kezilabda 1 project|LIN: Web pages| Right. Click|New|HTML…|TBX: Name=login. html, BTN: Finish| <!DOCTYPE html> <head> <title>Handball Page Login</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0"> <!-- Reference to compiled and minified bootstrap CSS --> <link rel="stylesheet„ href= "https: //maxcdn. bootstrapcdn. com/bootstrap/3. 4. 0/css/bootstrap. min. css"> <!-- Reference to j. Query library --> <script src= "https: //ajax. googleapis. com/ajax/libs/jquery/3. 4. 0/jquery. min. js"></script> <!-- Reference to compiled Java. Script provider --> <script src= "https: //maxcdn. bootstrapcdn. com/bootstrap/3. 4. 0/js/bootstrap. min. js"></script> <script> //---------Your CRUDAFs will be here-----------</script> </head> <body> <header> <h 1>Handball Page</h 1> <h 2>Login form</h 2> </header> <div> <!–- HTML elements of login --> <input type="text" id="txt. User" placeholder="Username"> <input type="password" id="txt. Password" placeholder="Password"> <button class="btn btn-primary" onclick="login()">Login</button> </div> </body> </html> ck Cli Parts marked with red should be added manually!
11. Front→Back MVC: 11. 3. Login: 11. 3. 1. Frontend HTML-JS 11. 3. 1. 2. Create login Java. Script in login. html page: function login() { //Declare local variables on HTML elements var user. Name = document. get. Element. By. Id("txt. User"). value; var password = document. get. Element. By. Id("txt. Password"). value; //Assemble request var request = { "felhasznalonev": user. Name, "jelszo": password, "task": "login"}; $. ajax({ url: "User. Servlet", type: "post", data: request, success: function(response) { //Success signal alert("Users logged in: " + response. msg); if(response. msg == "1") { //If login succesful. . . //Redirect to main page window. location = "index. html"; } else { //Error signal alert("Unsuccesful login!"); } }, error: function(response) { //Error signal alert("Connection error at login!"); } }); } C l ick
11. Front→Back MVC: 11. 3. Login: 11. 3. 1. Frontend HTML-JS 11. 3. Logged in check Java. Script at main page: Net. Beans| FRM: Projects| LIN: Kezilabda 1 project| LIN: Web pages| LIN: login. html| Double. Click| //READ: logged in user from browsers session function is. Logged. User() { //Assemble request var request = {"task": "is. Logged. User"}; //Communicate request with server via ajax $. ajax({ url: "User. Servlet", type: "post", data: request, success: function(response) { if (response. msg != "1") { //If not logged in //Not logged in signal alert("You are not logged in!"); console. log("Access attempt without logged in"); //Redirect to login page window. location = "login. html"; } }, error: function(response) { //Error signal alert("Login: No connection!"); //Redirect to login page window. location = "login. html"; } }); } 11. 3. 1. 4. Page load script Java. Script at main page: Net. Beans| FRM: Projects| LIN: Kezilabda 1 project| LIN: Web pages| LIN: index. html| Double. Click| <script> … //MAIN PROGRAM (runs before initialization of HTML elements of page) is. Logged. User(); //Check logged in </script>
11. Front→Back MVC: 11. 3. Login: 11. 3. 1. Frontend HTML-JS 11. 3. 1. 5. Logout button at main page: Net. Beans| FRM: Projects| LIN: Kezilabda 1 project| LIN: Web pages| LIN: index. html| Double. Click| <button onclick="logout()" class="btn btn-danger">Logout</button> 11. 3. 1. 5. Logout Java. Script at main page: Net. Beans| FRM: Projects| LIN: Kezilabda 1 project| LIN: Web pages| LIN: index. html| Double. Click| //DELETE: logged in user from browsers session lick C function logout() { //Assemble request var request = {"task": "logout"}; //Communicate request with server via ajax $. ajax({ url: "User. Servlet", type: "post", data: request, success: function(response) { if (response. msg == "1") { //Logout signal alert("Succesful logout!"); console. log("Succesful logout!"); window. location = "login. html"; //Redirect to login page } else { //Error signal alert("Backend error at logout, you stay logged in!"); window. location = "index. html"; //Redirect to main page } }, error: function(response) { //Error signal alert("Connection error at logout, you stay logged in!"); //Redirect to main page window. location = "index. html"; } }); }
11. Front→Back MVC: 11. 3. Login: Where we are now building MVC architecture? Func: login Jatek page(HTML, Ajax: request: o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend JS) „task”: „login” s „user. Name”: tbx. User. Name. v alue „password”: tbx. Password. val ue Ajax: response: Location=index. login html Func: is. Logged. Use Ajax: request: „task”: ”is. Logged. U Ajax: response: inp. Nev. val=user. N Location=login. html is Log ged User Func: logout Ajax: request. : „task”: ”logout” Ajax: response Location=login. htm Location=index. ht logout
11. Front→Back MVC: 11. 3. Login: 11. 3. 2. Create User Servlet 11. 3. 2. 1. Creation of User Servlet: Net. Beans|FRM: Projects|LIN: kezilabda 1| LIN: Source packages| LIN: Controller| Right. Click| New…| Servlet| DDN: Name=User. Servlet, BTN: Next| CHK: Add information to Web. XML=Yes, BTN: Finish //Do not forget! Parts marked with red should be added manually! package Controller; import Model. Felhasznalok; // Import model layer which will be created later! import Service. User. Service; import java. io. IOException; import java. io. Print. Writer; import javax. servlet. Servlet. Exception; import javax. servlet. http. Http. Servlet. Request; import javax. servlet. http. Http. Servlet. Response; import org. json. JSONObject; //Import JSON handler public class User. Servlet extends Http. Servlet { //Servlet method processing request from client and response to client protected void process. Request(Http. Servlet. Request request, Http. Servlet. Response response) throws Servlet. Exception, IOException { //Type of exceptions auto-generated at error response. set. Content. Type(" application/json"); //Set communication method to JSON Print. Writer out = response. get. Writer(); //Get the browser where to print response JSONObject obj = new JSONObject(); //JSON object to store response try { //General try-catch shell User. Service user. Service = new User. Service (); //Service layer created later! if (request. get. Parameter("task") != null) { //If there is task in client request… //--------Your CRUDAF task handler ifs come here!!! ---------} } catch (Exception e) { //General error handler out. write(e. to. String()); } } } 11. 3. 2. 2. Checking registration of User. Servlet to Glassfish server: Net. Beans| FRM: Projects| LIN: kezilabda 1 project| LIN: Configuration files| LIN: Web. XML| Dbl. Click <servlet><servlet-name>User. Servlet</servlet-name> <servlet-class>Controller. User. Servlet</servlet-class> </servlet> <servlet-mapping><servlet-name>User. Servlet</servlet-name> <url-pattern>/User. Servlet</url-pattern> </servlet-mapping>
11. Front→Back MVC: 11. 3. Login: 11. 3. 2. User Servlet: 11. 3. 2. 3. CRUDAFs 11. 3. 2. 3. 1. Login: CREATE: new actual user in session object of web browser: if (request. get. Parameter(" task"). equals("login")) { //If task is CREATE. . . //Read and typecast input parameters from request String user. Name = ""; String password = ""; user. Name = request. get. Parameter(" felhasznalonev"); password = request. get. Parameter(" jelszo"); Felhasznalok actual. User = user. Service. login(user. Name, password ); //Call service written later if(actual. User != null) { //If login was successful //Save the user to session object of browser, so he can return to main page after leaving it without re-login! request. get. Session(). set. Attribute("felhasznalo", actual. User); obj. put("msg", "1"); //Success signal into JSON response } else { obj. put("msg", "0"); //Error signal into JSON response } out. write(obj. to. String()); //Convert JSON response to string and send to browser } 11. 3. 2. Is. Logged. User: READ: actual user from session object of browser: if (request. get. Parameter(" task"). equals("is. Logged. User")) { //If task is READ. . . //Try to read actual logged in user instance written later from browser session Felhasznalok actual. User = (Felhasznalok)request. get. Session(). get. Attribute(" felhasznalo"); if(actual. User !=null) { //If there is logged in user. . . obj. put("felhasznalo. ID", actual. User. get. Felhasznalo. ID()); //Copy it to JSON response… obj. put("felhasznalonev", actual. User. get. Felhasznalonev ()); //to be able to decide… obj. put("jelszo", actual. User. get. Jelszo()); //users access rights later! obj. put("msg", "1"); //Successful login signal written to JSON response } else { obj. put("msg", "0"); //Unsuccessful login signal written to JSON response } out. write(obj. to. String()); //Convert JSON response to string and send to browser } 11. 3. 2. 3. 3. Logout: DELETE: actual user from session object of browser: if (request. get. Parameter(" task"). equals("logout")) { //If task is DELETE. . . //Remove logged in user entry from browser session request. get. Session(). set. Attribute(" felhasznalo", null); if(request. get. Session(). get. Attribute(" felhasznalo") == null) { obj. put("msg", "1"); //Succesful logout signal into JSON response } else { obj. put("msg", "0"); //Unsuccesful logout signal into JSON response } out. write(obj. to. String()); //Convert JSON response to string and send to browser }
11. Front→Back MVC: 11. 3. Login: Where we are now building MVC architecture? Func: login Jatek page(HTML, Ajax: request: o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend JS) „task”: „login” s IF: ”task”=”login” String: „user. Name”: Json. Obj request. get. Par „msg”=„ 1” tbx. User. Name. v alue „user. Name” „password”: „password” IF: OK? tbx. Password. val New: user. Service String: ue Json. Obj Ajax: response: „msg”=„ 0” Location=index. login Session: user html String: Func: is. Logged. Use IF: ”task”=”is. Logged. User” Json. Obj Ajax: request: „msg”=„ 1” „task”: ”is. Logged. U IF: OK? Ajax: response: inp. Nev. val=user. N Location=login. html is Log ged User String: Json. Obj „msg”=„ 0”Session: user Func: logout Ajax: request. : „task”: ”logout” „msg”=„ 1” Ajax: response IF: OK? Location=login. htm Location=index. ht String: Json. Obj IF: ”task”=”logout” String: Json. Obj logout „msg”=„ 0” Session: null
11. Front→Back MVC: 11. 3. Login: 11. 3. 3. Create User Service 11. 3. 3. 1. Creation as normal Java class: Net. Beans| FRM: Projects| LIN: kezilabda 1| LIN: Source packages| LIN: Service| Right. Click| New…| Java Class| DDN: Name = User. Service, BTN: OK 11. 3. 3. 2. Writing CRUDAFs: package Service; import Model. Kapcsolat; //Import central connection handler import Model. Felhasznalok; //Import model layer written later! import javax. persistence. Entity. Manager ; //Import peristence stuff import javax. persistence. Parameter. Mode; import javax. persistence. Stored. Procedure. Query; public class User. Service { //READ: user id from database filtered by username + password //with simple processing: databse query is launched from service layer instead of model public Felhasznalok login(String user. Name, String password) { Felhasznalok actual. User = null; //Declare result instance empty as error signal try { //Entity class query works only in try catch sheell //Create separate instance of entity manager to avoid system freezing Entity. Manager em = new Kapcsolat(). get. Entity. Manager(); //Select stored proc of database Stored. Procedure. Query login. Sql = em. create. Stored. Procedure. Query(" login"); //Register parameters of stored proc login. Sql. register. Stored. Procedure. Parameter("felhasznalonev. IN", String. class, Parameter. Mode. IN); login. Sql. register. Stored. Procedure. Parameter("jelszo. IN", String. class, Parameter. Mode. IN); login. Sql. register. Stored. Procedure. Parameter("id. OUT", Integer. class, Parameter. Mode. OUT); //Load stored proc with input parameters login. Sql. set. Parameter(" felhasznalonev. IN", user. Name); login. Sql. set. Parameter(" jelszo. IN", password); //Run stored proc login. Sql. execute(); //Read individual output parameter into Object typed variable Object id. OUT = login. Sql. get. Output. Parameter. Value(" id. OUT"); //Try to parse id. OUT into integer Integer id = Integer. parse. Int(id. OUT. to. String()); //Read full user record with find method of entity manager into actual instance //It cannot handle parallel user queries being without transaction processing!!! actual. User = new Kapcsolat(). get. Entity. Manager(). find(Felhasznalok. class, id); } catch (Exception e) { System. out. println(" Login query error: " + e. to. String()); }
11. Front→Back MVC: 11. 3. Login: Where we are now building MVC architecture? Func: login Jatek page(HTML, Ajax: request: o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend JS) Met: login „task”: „login” user. ID s IF: ”task”=”login” String: „user. Name”: user. Name Json. Obj password request. get. Par „msg”=„ 1” tbx. User. Name. v alue „user. Name” „password”: IF: integer? „password” IF: OK? tbx. Password. val IF: OK? New: user= New: user. Service String: ue IF: OK? Json. Obj Ajax: response: em. find(user. ID) „msg”=„ 0” Location=index. Except: I/O login Session: user html String: Func: is. Logged. Use IF: ”task”=”is. Logged. User” Json. Obj Ajax: request: „msg”=„ 1” „task”: ”is. Logged. U IF: OK? Ajax: response: inp. Nev. val=user. N Location=login. html is Log ged User String: Json. Obj „msg”=„ 0”Session: user Func: logout Ajax: request. : „task”: ”logout” „msg”=„ 1” Ajax: response IF: OK? Location=login. htm Location=index. ht String: Json. Obj IF: ”task”=”logout” String: Json. Obj logout „msg”=„ 0” Session: null
11. Front→Back MVC: 11. 3. Login: 11. 3. 4. Create database 11. 3. 4. Create felhasznalok (users) database table: XAMPP|FRM: Left|LIN: kezilabda 1|LIN: felhasznalok jelszo (password) field has type of varchar(64) because we are not storing password string (to prevent database admin to steal it), but its undezipherable encoded form using SHA 1 hash function, which always produces 64 -character string result, regardless the lenght of password.
11. Front→Back MVC: 11. 3. Login: 11. 3. 5. Create stored proc 11. 3. 5. Creating Stored Procedures: php. My. Admin|FRM: Left|LIN: kezilabda 1|FRM: Right|TAB: Procedures| CREATE DEFINER=`root`@`localhost` PROCEDURE `login` ( IN `felhasznalonev. IN` VARCHAR(20) CHARSET utf 8, IN `jelszo. IN` VARCHAR(50) CHARSET utf 8, OUT `id. OUT` INT(8) ) NO SQLSELECT felhasznalok. felhasznalo_ID INTO id. OUT FROM felhasznalok WHERE felhasznalok. felhasznalonev = felhasznalonev. IN AND felhasznalok. jelszo = SHA 1(jelszo. IN)$$ --compare encoded! 11. 3. 6. Creating Felhasznalok model class: As we already write it CRUDAFs at service layer, creation is fully automated in the usual way, not involving any manual coding: Net. Beans|FRM: Projects|LIN: kezilabda 1|LIN: Source packages| LIN: Model| Right. Click| New…|New Entity Classes from database| DDN: Data source=New. . . | TBX: JDNI Name=kezilabda 1, BTN: OK| - If data sorce works, it will show available tables: LST: Available tables|LIN: felhasznalok|BTN: Add, BTN: Next| DDN: Project=Kezilabda 1, DDN: Location=Packages, DDN: Package=Model, TBX: Class name=Felhasznalok – table name is capitalized to make it class name, CHK: Create persistence unit=Yes, BTN: Next, BTN: Finish
11. Front→Back MVC: 11. 3. Login: Where we are now building MVC architecture? Func: login Jatek page(HTML, Ajax: request: o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend JS) Met: login „task”: „login” user. ID s SP: login IF: ”task”=”login” String: „user. Name”: user. Name IN: user. Name. IN Json. Obj password request. get. Par „msg”=„ 1” tbx. User. Name. v IN: password. IN alue „user. Name” „password”: OUT: user. IDOUT IF: integer? „password” IF: OK? tbx. Password. val IF: OK? New: user= New: user. Service String: ue IF: OK? Json. Obj Ajax: response: em. find(user. ID) „msg”=„ 0” Location=index. Except: I/O login Session: user html String: Func: is. Logged. Use IF: ”task”=”is. Logged. User” Json. Obj Ajax: request: „msg”=„ 1” „task”: ”is. Logged. U IF: OK? Ajax: response: inp. Nev. val=user. N Location=login. html is Log ged User String: Json. Obj „msg”=„ 0”Session: user Func: logout Ajax: request. : „task”: ”logout” „msg”=„ 1” Ajax: response IF: OK? Location=login. htm Location=index. ht String: Json. Obj IF: ”task”=”logout” String: Json. Obj logout „msg”=„ 0” Session: null
11. Front→Back MVC: 11. 3. Login: 11. 3. 6. Create model class Check the auto-generated program code and delete unneccessary setters! package Model; //Imports are auto-inserted by entity class import java. io. Serializable; … import javax. xml. bind. annotation. Xml. Root. Element; @Entity @Table(name = "felhasznalok") //Database table assignment @Xml. Root. Element @Named. Queries({//We do not use auto-crated native SQL named queries, because they are slow! …}) public class Felhasznalok implements Serializable { //-------------Annotations for database table fields-------------private static final long serial. Version. UID = 1 L; @Id @Generated. Value(strategy = Generation. Type. IDENTITY) @Basic(optional = false) @Column(name = "felhasznalo_ID") private Integer felhasznalo. ID; @Basic(optional = false) @Not. Null @Size(min = 1, max = 20) @Column(name = "felhasznalonev") private String felhasznalonev; @Basic(optional = false) @Not. Null @Size(min = 1, max = 64) @Column(name = "jelszo") private String jelszo; //--------------Auto-created constructor polymorphs--------------public Felhasznalok() {} public Felhasznalok(Integer felhasznalo. ID) { this. felhasznalo. ID = felhasznalo. ID ; } public Felhasznalok(Integer felhasznalo. ID, String felhasznalonev, String jelszo) { this. felhasznalo. ID = felhasznalo. ID; this. felhasznalonev = felhasznalonev; this. jelszo = jelszo; } //----------Auto-created getters-setters, remove superflous ones!---------public Integer get. Felhasznalo. ID() { return felhasznalo. ID; } public String get. Felhasznalonev() { return felhasznalonev; } public String get. Jelszo() { return jelszo; }
11. Front→Back MVC: 11. 3. Login: Where we are now building MVC architecture? Func: login Jatek page(HTML, Ajax: request: o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend JS) Met: login „task”: „login” user. ID s SP: login IF: ”task”=”login” String: „user. Name”: user. Name Inst: user IN: user. Name. IN Json. Obj password request. get. Par „msg”=„ 1” tbx. User. Name. v user. ID IN: password. IN alue „user. Name” user. Name „password”: OUT: user. IDOUT IF: integer? „password” IF: OK? tbx. Password. val user. password IF: OK? New: user= New: user. Service String: ue IF: OK? Json. Obj Ajax: response: em. find(user. ID) „msg”=„ 0” Location=index. Except: I/O login Session: user html Inst: user. ID user. Name user. password String: Func: is. Logged. Use IF: ”task”=”is. Logged. User” Json. Obj Ajax: request: „msg”=„ 1” „task”: ”is. Logged. U IF: OK? Ajax: response: inp. Nev. val=user. N Location=login. html is Log ged User String: Json. Obj „msg”=„ 0”Session: user Func: logout Ajax: request. : „task”: ”logout” „msg”=„ 1” Ajax: response IF: OK? Location=login. htm Location=index. ht String: Json. Obj IF: ”task”=”logout” String: Json. Obj logout „msg”=„ 0” Session: null
11. Front→Back MVC: 11. 3. Login: login process animated Func: login Jatek page(HTML, Ajax: request: o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend JS) Met: login „task”: „login” user. ID s SP: login IF: ”task”=”login” String: „user. Name”: user. Name Inst: user IN: user. Name. IN Json. Obj password request. get. Par „msg”=„ 1” tbx. User. Name. v user. ID IN: password. IN alue „user. Name” user. Name „password”: OUT: user. IDOUT IF: integer? „password” IF: OK? tbx. Password. val user. password IF: OK? New: user= New: user. Service String: ue IF: OK? Json. Obj Ajax: response: em. find(user. ID) „msg”=„ 0” Location=index. Except: I/O login Session: user html is Log ged User logout
11. Front→Back MVC: 11. 3. Login: is. Logged. User process animated Jatek o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend page(HTML, JS) s login Inst: user. ID user. Name user. password String: Func: is. Logged. Use IF: ”task”=”is. Logged. User” Json. Obj Ajax: request: „msg”=„ 1” „task”: ”is. Logged. U IF: OK? Ajax: response: inp. Nev. val=user. N Location=login. html is Log ged User logout String: Json. Obj „msg”=„ 0”Session: user
11. Front→Back MVC: 11. 3. Login: logout process animated Jatek o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend page(HTML, JS) s login is Log ged User Func: logout Ajax: request. : „task”: ”logout” „msg”=„ 1” Ajax: response IF: OK? Location=login. htm Location=index. ht String: Json. Obj IF: ”task”=”logout” String: Json. Obj logout „msg”=„ 0” Session: null
Content of the Presentation 11. Frontend-to-Backend MVC development 11. 1. Sample project 11. 2. Basic definitions 11. 3. Creating login without registration 11. 3. 1. Frontend login page 11. 3. 2. User Servlet 11. 3. 3. User Service 11. 3. 4. felhasznalok database table 11. 3. 5. Stored procedures 11. 3. 6. Felhasznalok model class 11. 4. Creating login with registration 11. 4. 1. Sample project 11. 4. 2. Frontend page 11. 4. 3. User. Servlet 11. 4. 4. User. Service 11. 4. 5. Database table 11. 4. 6. Stored procedures 11. 4. 7. Generating model class References
11. Front→Back MVC: 11. 4. Creating login with registration 11. 4. 1. Sample project: LDDAnim Java web application, and user table of lddanim XAMPP My. SQL Maria. DB database (we describe only the differences from the last template, not the whole solution!!!) 11. 4. 2. Creating Frontend pages: 11. 4. 2. 1. Login page HTML: <!DOCTYPE html> <head> <title>Animation Editor for Lego Digital Designer LXFML model files: Login page </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0 "> <link rel="stylesheet" href="https: //use. fontawesome. com/releases/v 5. 8. 2/css/all. css" crossorigin="anonymous"> <link rel="stylesheet" href="https: //maxcdn. bootstrapcdn. com/bootstrap/3. 4. 0/css/bootstrap. min. css"> <script src="https: //ajax. googleapis. com/ajax/libs/jquery/3. 3. 1/jquery. min. js"></script> <script src="https: //ajax. googleapis. com/ajax/libs/jquery/3. 4. 0/jquery. min. js"></script> <script src="https: //maxcdn. bootstrapcdn. com/bootstrap/3. 4. 0/js/bootstrap. min. js"></script> <!-- Own Java. Scripts --> //---------Your CRUDAFs will come here! -----------</script> </head> <body> <div> Click <input type="text" id="tbx. User. Name" placeholder="User name"> <input type="password" id="tbx. Password" placeholder="Password"> <button onclick="login()">Login</button> </div> <div> In case you do not have valid username and password, you can register for new account providing additional data: <input type="text" id="tbx. Email" placeholder="E-mail"> <input type="text" id="tbx. Given. Name" placeholder="Given name"> <input type="text" id="tbx. Sur. Name" placeholder="Surname"> <input type="text" id="tbx. Address" placeholder="Street address"> <input type="text" id="tbx. City" placeholder="City"> <input type="text" id="tbx. Zip" placeholder="Zip code"> <input type="text" id="tbx. Country" placeholder="Country"> <button onclick="register()">Register</button> </div> Click </body>
11. Front→Back MVC: 11. 4. Login with registration: 11. 4. 2. Frontend: 11. 4. 2. 2. Login page CRUDAFs in JS: 11. 4. 2. 2. 1. CREATE: logged in user into session of browser: function login() { var user = document. get. Element. By. Id("tbx. User. Name"). value; var password = document. get. Element. By. Id("tbx. Password"). value; var request = {"user. Name": user, "password": password, "task": "login"}; $. ajax({ url: "User. Servlet", type: "post", data: request, Click success: function(response) { if (response. msg == "1") { //At correct login, User. Servlet replies 1 window. location = "index. html"; //Shift to index page } else { alert("Unsuccessful login"); } }, error: function(response) { alert("Connection error during login"); } }); }
11. Front→Back MVC: 11. 4. Login with registration: 11. 4. 2. Frontend: 11. 4. 2. 2. Login page 11. 4. 2. 2. 2. CREATE: new user into datbase table user: function register() { var user = document. get. Element. By. Id("tbx. User. Name"). value; var password = document. get. Element. By. Id("tbx. Password"). value; var email = document. get. Element. By. Id("tbx. Email"). value; var given. Name = document. get. Element. By. Id("tbx. Given. Name"). value; var sur. Name = document. get. Element. By. Id("tbx. Sur. Name"). value; var address = document. get. Element. By. Id("tbx. Address"). value; var city = document. get. Element. By. Id("tbx. City"). value; var zip = document. get. Element. By. Id("tbx. Zip"). value; var country = document. get. Element. By. Id("tbx. Country"). value; var request = {"user. Name": user, "password": password, "email": email, "given. Name": given. Name, "sur. Name": sur. Name, "address": address, Clic "city": city, k "zip": zip, "country": country, "task": "register"}; $. ajax({ url: "User. Servlet", type: "post", data: request, success: function(response) { if (response. msg == "1") { //At correct register, User. Servlet replies 1 alert("Successful registration, try to login with your selected username and password"); window. location = "login. html"; //Shift to login page } else { alert("Unsuccessful registration: the username+password is already used, try another one!"); } }, error: function(response) { alert("Connection error during registration"); }
11. Front→Back MVC: 11. 4. Login with registration: 11. 4. 2. Frontend: 11. 4. 2. 3. Main page additions in HTML-JS: 11. 4. 2. 3. 1. Main page additions in HTML: Welcome, <input type="text" id="tbx. Logged. User. Name" placeholder="Logged user name"> <button onclick='logout()'>Logout</button> 11. 4. 2. 3. 2. Main page added CRUDAFs in JS: 11. 4. 2. 3. 2. 1. READ: logged in user from session object of browser: function is. Logged. User() { var request = {"task": "is. Logged. User"}; $. ajax({ url: "User. Servlet", type: "post", data: request, success: function(response) { if (response. msg != "1") { //User. Servlet replies not logged in alert("You are not logged in: Reply from User. Servlet: " + response. msg); console. log("Unauthorized login attempt"); window. location="login. html"; } else { //User. Servlet replies logged in document. get. Element. By. Id("tbx. Logged. User. Name"). placeholder=response. user. Na me; } }, error: function(response) { alert("Connection error"); window. location="login. html"; } }); }
11. Front→Back MVC: 11. 4. Login with registration: 11. 4. 2. Frontend: 11. 4. 2. 3. Main page 11. 4. 2. 3. 2. 2. DELETE: logged in user from session object of browser: function logout() { var request = {"task": "logout"}; $. ajax({ k Clic url: "User. Servlet", type: "post", data: request, success: function(response) { if (response. msg == "1") { //Replies 1 in case of succesful logout alert("You are logged out successfully, will be redirected to login page"); console. log("Successful logout"); window. location = "login. html"; } else { alert("Unsuccesful logout, page reloading, unless you see login page"); window. location = "index. html"; } }, error: function(response) { alert("Connection error during logout, page reloading, unless you see login page"); window. location = "index. html"; } }); } 11. 4. 2. 3. MAIN PROGRAM: launched before onload event of page
11. Front→Back MVC: 11. 4. Login+Registration: Where we are now building MVC architecture? Func: login Jatek page(HTML, Ajax: request: o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend JS) „task”: „login” s „user. Name”: tbx. User. Name. v alue „password”: tbx. Password. val login ue Ajax: response: Location=index. html Func: is. Logged. Use Ajax: request: „task”: ”is. Logged. U Ajax: response: is inp. Nev. val=user. N Log Location=login. html ged User logout add New User Is Regis tered Func: logout Ajax: request. : „task”: ”logout” Ajax: response Location=login. htm Location=index. ht Func: register Ajax: request: „task”: ”register” „user. Name”: tbx. Username. va lue „password”: tbx. Password. val ue „email”: tbx. Email. value „address”: tbx. Address. valu e „city”: tbx. City. value „zip”: tbx. Zip. value „country”: tbx. Country. valu
11. Front→Back MVC: 11. 4. Login with registration: 11. 4. 3. User Servlet 11. 4. 3. User. Servlet: 11. 4. 3. 1. Create User Servlet class: package Controller; import Model. User; import Service. User. Service; import java. io. IOException; import java. io. Print. Writer; import javax. servlet. Servlet. Exception; import javax. servlet. http. Http. Servlet. Request; import javax. servlet. http. Http. Servlet. Response; import org. json. JSONObject; public class User. Servlet extends Http. Servlet { protected void process. Request(Http. Servlet. Request request, Http. Servlet. Response response) throws Servlet. Exception, IOException { response. set. Content. Type("application/json"); //Message format set to json Print. Writer out = response. get. Writer(); //Direct text output to browser try { //Create userservice instance, it will be written later User. Service user. Service = new User. Service(); if (request. get. Parameter("task") != null) { //If valid task. . . //------------Own CRUDAFs-------------} } catch (Exception e) { //General User. Servlet error out. write(e. to. String() + " ERROR: Unidentified User. Servlet error"); } } }
11. Front→Back MVC: 11. 4. Login with registration: 11. 4. 3. User Servlet: 11. 4. 3. 2. CRUDAFs 11. 4. 3. 2. Write CRUDAF handler ifs: 11. 4. 3. 2. 1. CREATE: actual user in session object of browser: if (request. get. Parameter("task"). equals("login")) { //If task is login. . . String user. Name = ""; String password = ""; user. Name = request. get. Parameter("user. Name"); //Collect data from request password = request. get. Parameter("password"); JSONObject retrieve = new JSONObject(); //Model, service classes will be written later User user = user. Service. login(user. Name, password); //Search for user if (user != null) { //If valid user. . . request. get. Session(). set. Attribute("user", user); //Copy user into session retrieve. put("msg", "1"); //Success flag } else { //If invalid user retrieve. put("msg", "0"); //failure flag } out. write(retrieve. to. String()); }
11. Front→Back MVC: 11. 4. Login with registration: 11. 4. 3. User Servlet: 11. 4. 3. 2. CRUDAFs 11. 4. 3. 2. 4. CREATE: new user into user table: if (request. get. Parameter("task"). equals("register")) { //If task is register. . . String user. Name = ""; String password = ""; String email = ""; user. Name = request. get. Parameter(" user. Name"); //Collect data from request password = request. get. Parameter(" password"); email = request. get. Parameter(" email"); JSONObject retrieve = new JSONObject(); if (user. Service. is. Registered(user. Name, password, email) == 0) { //No matching registered user found. . . String given. Name = ""; String sur. Name = ""; String address = ""; String city = ""; String zip = ""; String country = ""; given. Name = request. get. Parameter(" given. Name"); sur. Name = request. get. Parameter(" sur. Name"); address = request. get. Parameter(" address"); city = request. get. Parameter(" city"); zip = request. get. Parameter(" zip"); country = request. get. Parameter(" country"); User user = user. Service. add. New. User(user. Name, //Service, model classes will be written later! password, email, given. Name, sur. Name, address, city, zip, country); if (user != null) { retrieve. put(" msg", "1"); //Success flag } else { retrieve. put(" msg", "0"); //failure flag } } else { //If matching user already registered. . . retrieve. put("msg", "0"); //failure flag } out. write(retrieve. to. String ());
11. Front→Back MVC: 11. 4. Login with registration: 11. 4. 3. User Servlet: 11. 4. 3. 2. CRUDAFs 11. 4. 3. 2. 2. READ: actual user from browser session: if (request. get. Parameter("task"). equals("is. Logged. User")) { //If task is is. Logged. User. . . User user = (User)request. get. Session(). get. Attribute("user"); //Search for user in session. . . JSONObject retrieve = new JSONObject(); //Model class will be written later! if (user != null) { //If user found. . . retrieve. put("user. Name", user. get. User. Name()); //Copy user data into reply retrieve. put("msg", "1"); //Success flag } else { //If user not found. . . retrieve. put("msg", "0"); //failure flag } out. write(retrieve. to. String()); } 11. 4. 3. 2. 3. DELETE: actual user from session object of browser: if (request. get. Parameter("task"). equals("logout")) { //If task is logout. . . request. get. Session(). set. Attribute("user", null); //Kill user in session User user = (User)request. get. Session(). get. Attribute("user"); //Search for user in session… JSONObject retrieve = new JSONObject(); //Model class will be written later if (user == null) { //If user not found. . . retrieve. put("msg", "1"); //Success flag } else { //If user found. . . retrieve. put("msg", "0"); //failure flag } out. write(retrieve. to. String()); }
11. Front→Back MVC: 11. 4. Login+Registration: Where we are now building MVC architecture? Func: login Jatek page(HTML, Ajax: request: o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend JS) „task”: „login” s IF: ”task”=”login” String: „user. Name”: Json. Obj request. get. Par „msg”=„ 1” tbx. User. Name. v alue „user. Name” „password”: „password” IF: OK? tbx. Password. val login New: user. Service String: ue Json. Obj Ajax: response: „msg”=„ 0” Location=index. Session: user html String: Func: is. Logged. Use IF: ”task”=”is. Logged. User” Json. Obj Ajax: request: „msg”=„ 1” „task”: ”is. Logged. U IF: OK? Ajax: response: is inp. Nev. val=user. N Log Location=login. html ged String: User Json. Obj logout „msg”=„ 0”Session: user Func: logout IF: ”task”=”logout” String: Ajax: request. : Json. Obj „task”: ”logout” „msg”=„ 1” Ajax: response IF: OK? Location=login. htm Location=index. ht String: Func: register Json. Obj Ajax: request: Session: null „task”: ”register” „user. Name”: IF: ”task”=”register”String: Json. Obj tbx. Username. va request. get. Par „msg”=„ 1” lue „password”: „user. Name” IF: OK? tbx. Password. val „password” „email” String: ue„email”: „given. Name” Json. Obj „sur. Name” „msg”=„ 0” tbx. Email. value „address”: „address” tbx. Address. valu „city” e „zip” „city”: „country” tbx. City. value „zip”: New: user. Service tbx. Zip. value „country”: IF: equals(0)? tbx. Country. valu „msg”=„ 0” add New User Is Regis tered
11. Front→Back MVC: 11. 4. Login with registration: 11. 4. 4. User Service 11. 4. 4. User. Service: package Service; import Model. Kapcsolat; import Model. User; import javax. persistence. Parameter. Mode; import javax. persistence. Stored. Procedure. Query; public class User. Service { 11. 4. 4. 1. CREATE: actual user in session bject of browser public User login(String user. Name, String password) { User user = null; //Placeholder user for error signal, model class will be written later! try { Stored. Procedure. Query login. Query = new Kapcsolat(). get. Entity. Manager(). create. Stored. Procedure. Query("login"); login. Query. register. Stored. Procedure. Parameter("user. Name. IN", String. class, Parameter. Mode. IN); login. Query. register. Stored. Procedure. Parameter("password. IN", String. class, Parameter. Mode. IN); login. Query. register. Stored. Procedure. Parameter("user. IDOUT", String. class, Parameter. Mode. OUT); login. Query. set. Parameter("user. Name. IN", user. Name); login. Query. set. Parameter("password. IN", password); login. Query. execute(); Integer user. ID=Integer. parse. Int(login. Query. get. Output. Parameter. Value("user. IDOUT"). to. String()); user = new Kapcsolat(). get. Entity. Manager(). find(User. class, user. ID); } catch (Exception e) { System. out. println(e. to. String() + " ERROR: login query failed at User. Service"); } return user; }
11. Front→Back MVC: 11. 4. Login with registration: 11. 4. 4. User Service 1. 4. 4. 2. CREATE: Add new user to user database table: public User add. New. User(String user. Name, String password, String email, String given. Name, String sur. Name, String address, String city, String zip, String country) { User user = null; //Placeholder user for error signal, model class will be written later! try { Stored. Procedure. Query add. New. User. Query = new Kapcsolat(). get. Entity. Manager(). create. Stored. Procedure. Query(" add. New. User"); add. New. User. Query. register. Stored. Procedure. Parameter("user. Name. IN", String. class, Parameter. Mode. IN); add. New. User. Query. register. Stored. Procedure. Parameter("password. IN", String. class, Parameter. Mode. IN); add. New. User. Query. register. Stored. Procedure. Parameter("email. IN", String. class, Parameter. Mode. IN); add. New. User. Query. register. Stored. Procedure. Parameter("given. Name. IN", String. class, Parameter. Mode. IN); add. New. User. Query. register. Stored. Procedure. Parameter("sur. Name. IN", String. class, Parameter. Mode. IN); add. New. User. Query. register. Stored. Procedure. Parameter("address. IN", String. class, Parameter. Mode. IN); add. New. User. Query. register. Stored. Procedure. Parameter("city. IN", String. class, Parameter. Mode. IN); add. New. User. Query. register. Stored. Procedure. Parameter("zip. IN", String. class, Parameter. Mode. IN); add. New. User. Query. register. Stored. Procedure. Parameter("country. IN", String. class, Parameter. Mode. IN); add. New. User. Query. set. Parameter ("user. Name. IN", user. Name); add. New. User. Query. set. Parameter ("password. IN", password); add. New. User. Query. set. Parameter ("email. IN", email); add. New. User. Query. set. Parameter ("given. Name. IN", given. Name); add. New. User. Query. set. Parameter ("sur. Name. IN", sur. Name); add. New. User. Query. set. Parameter ("address. IN", address); add. New. User. Query. set. Parameter ("city. IN", city); add. New. User. Query. set. Parameter ("zip. IN", zip); add. New. User. Query. set. Parameter ("country. IN", country); add. New. User. Query. execute(); user = login(user. Name, password); } catch (Exception e) { System. out. println(e. to. String () + " ERROR: add new user query failed at User. Service "); } return user; } }
11. Front→Back MVC: 11. 4. Login with registration: 11. 4. 4. User 1. 4. 4. 3. READ: user by user. Name, password, Service email from database table: public Integer is. Registered(String user. Name, String password, String email) { Integer registered. User. Count = 0; try { Stored. Procedure. Query is. Registered. Query = new Kapcsolat(). get. Entity. Manager(). create. Stored. Procedure. Query("is. Registered"); is. Registered. Query. register. Stored. Procedure. Parameter("user. Name. IN", String. class, Parameter. Mode. IN); is. Registered. Query. register. Stored. Procedure. Parameter("password. IN", String. class, Parameter. Mode. IN); is. Registered. Query. register. Stored. Procedure. Parameter("email. IN", String. class, Parameter. Mode. IN); is. Registered. Query. register. Stored. Procedure. Parameter("registered. User. Count. OUT", Integer. class, Parameter. Mode. OUT); is. Registered. Query. set. Parameter("user. Name. IN", user. Name); is. Registered. Query. set. Parameter("password. IN", password); is. Registered. Query. set. Parameter("email. IN", email); is. Registered. Query. execute(); registered. User. Count = Integer. parse. Int(is. Registered. Query. get. Output. Parameter. Value("registered. User. Count. OUT"). to. String() ); } catch (Exception e) { System. out. println(e. to. String() + " ERROR: user is already registered query failed at User. Service"); } return registered. User. Count; }
11. Front→Back MVC: 11. 4. Login+Registration: Where we are now building MVC architecture? Func: login Jatek page(HTML, Ajax: request: o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend JS) Met: login „task”: „login” user. ID s IF: ”task”=”login” String: „user. Name”: user. Name Json. Obj password request. get. Par „msg”=„ 1” tbx. User. Name. v alue „user. Name” „password”: IF: integer? „password” IF: OK? tbx. Password. val login IF: OK? New: user= New: user. Service String: ue IF: OK? Json. Obj Ajax: response: em. find(user. ID) „msg”=„ 0” Location=index. Except: I/O Session: user html String: Func: is. Logged. Use IF: ”task”=”is. Logged. User” Json. Obj Ajax: request: „msg”=„ 1” „task”: ”is. Logged. U IF: OK? Ajax: response: is inp. Nev. val=user. N Log Location=login. html ged String: User Json. Obj „msg”=„ 0”Session: user Func: logout IF: ”task”=”logout” String: Ajax: request. : Json. Obj „task”: ”logout” „msg”=„ 1” Ajax: response IF: OK? Location=login. htm Location=index. ht String: Func: register Json. Obj Ajax: request: logout add New User Is Regis tered IF: OK? Except: I/O Registered User. Count IF: OK? Except: I/O Met: add. New. User user. Name „msg”=„ 0” password IF: ”task”=”register”String: Email Json. Obj given. Name request. get. Par „msg”=„ 1” sur. Name „user. Name” Address „password” IF: OK? City „email” String: Zip „given. Name” Json. Obj IF: OK? country „sur. Name” „msg”=„ 0” „address” „city” Met: is. Registered „zip” user. Name „country” password email New: user. Service IF: OK? IF: equals(0)? Session: null „task”: ”register” „user. Name”: tbx. Username. va lue „password”: tbx. Password. val ue „email”: tbx. Email. value „address”: tbx. Address. valu e „city”: tbx. City. value „zip”: tbx. Zip. value „country”: tbx. Country. valu
11. Front→Back MVC: 11. 4. Login with registration: 11. 4. 5. user database table: 11. 4. 5. User table
11. Front→Back MVC: 11. 4. Login with registration: 11. 4. 6. Stored procedures: 11. 4. 6. Stored proc 11. 4. 6. 1. CREATE: new user in user table: CREATE DEFINER=`root`@`localhost` PROCEDURE `add. New. User` ( IN `user. Name. IN` VARCHAR(16) CHARSET utf 8, IN `password. IN` VARCHAR(64) CHARSET utf 8, IN `email. IN` VARCHAR(64) CHARSET utf 8, IN `given. Name. IN` VARCHAR(32) CHARSET utf 8, IN `sur. Name. IN` VARCHAR(32) CHARSET utf 8, IN `address. IN` VARCHAR(64) CHARSET utf 8, IN `city. IN` VARCHAR(32) CHARSET utf 8, IN `zip. IN` VARCHAR(16) CHARSET utf 8, IN `country. IN` VARCHAR(32) CHARSET utf 8) NO SQLINSERT INTO `user` ( `user`. `user. Name`, `user`. `password`, `user`. `email`, `user`. `given. Name`, `user`. `sur. Name`, `user`. `address`, `user`. `city`, `user`. `zip`, `user`. `country` ) VALUES ( user. Name. IN, SHA 1(password. IN), email. IN, given. Name. IN, sur. Name. IN, address. IN, city. IN, zip. IN, country. IN )$$
11. Front→Back MVC: 11. 4. Login with registration: proc 11. 4. 6. 2. READ: user from 11. 4. 6. Stored user table: CREATE DEFINER=`root`@`localhost` PROCEDURE `login` ( IN `user. Name. IN` VARCHAR(16) CHARSET utf 8, IN `password. IN` VARCHAR(64) CHARSET utf 8, OUT `user. IDOUT` INT(8)) NO SQLSELECT `user`. `user. ID` INTO user. IDOUT FROM `user` WHERE `user`. `user. Name` = user. Name. IN AND `user`. `password` = SHA 1(password. IN)$$ -- Encoded matching! -- 11. 4. 6. 3. FIND: match newly registering user with existing ones: CREATE DEFINER=`root`@`localhost` PROCEDURE `is. Registered` ( IN `user. Name. IN` VARCHAR(32) CHARSET utf 8, IN `password. IN` VARCHAR(64) CHARSET utf 8, IN `email. IN` VARCHAR(64) CHARSET utf 8, OUT `registered. User. Count. OUT` INT(8)) NO SQLSELECT COUNT(`user`. `user. ID`) INTO registered. User. Count. OUT FROM `user` WHERE (`user`. `user. Name` = user. Name. IN AND `user`. `password` = SHA 1(password. IN) ) OR (`user`. `email` = email. IN)$$
11. Front→Back MVC: 11. 4. Login+Registration: Where we are now building MVC architecture? Func: login Jatek page(HTML, Ajax: request: o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend JS) Met: login „task”: „login” user. ID s SP: login IF: ”task”=”login” String: „user. Name”: user. Name IN: user. Name. IN Json. Obj password request. get. Par „msg”=„ 1” tbx. User. Name. v IN: password. IN alue „user. Name” „password”: OUT: user. IDOUT IF: integer? „password” IF: OK? tbx. Password. val login IF: OK? New: user= New: user. Service String: ue IF: OK? Json. Obj Ajax: response: em. find(user. ID) „msg”=„ 0” Location=index. Except: I/O Session: user html String: Func: is. Logged. Use IF: ”task”=”is. Logged. User” Json. Obj Ajax: request: „msg”=„ 1” „task”: ”is. Logged. U IF: OK? Ajax: response: is inp. Nev. val=user. N Log Location=login. html ged String: User Json. Obj „msg”=„ 0”Session: user Func: logout IF: ”task”=”logout” String: Ajax: request. : Json. Obj „task”: ”logout” „msg”=„ 1” Ajax: response IF: OK? Location=login. htm Location=index. ht String: Func: register Json. Obj Ajax: request: logout SP: add. New. User IN: user. Name. IN IN: password. IN IN: email. IN IN: given. Name. IN IN: sur. Name. IN IN: address. IN add IN: city. IN IF: OK? New IN: zip. IN User IN: country. IN OUT: Except: I/O Registered SP: is. Registered User. Count IN: user. Name. IN IN: password. IN Is IN: email. IN Regis OUT: registered. IF: OK? tered User. Count. OUT Except: I/O Met: add. New. User user. Name „msg”=„ 0” password IF: ”task”=”register”String: Email Json. Obj given. Name request. get. Par „msg”=„ 1” sur. Name „user. Name” Address „password” IF: OK? City „email” String: Zip „given. Name” Json. Obj IF: OK? country „sur. Name” „msg”=„ 0” „address” „city” Met: is. Registered „zip” user. Name „country” password email New: user. Service IF: OK? IF: equals(0)? Session: null „task”: ”register” „user. Name”: tbx. Username. va lue „password”: tbx. Password. val ue „email”: tbx. Email. value „address”: tbx. Address. valu e „city”: tbx. City. value „zip”: tbx. Zip. value „country”: tbx. Country. valu
11. Front→Back MVC: 11. 4. Login with registration: 11. 4. 7. Model class 11. 4. 7. Generating model class: Full-auto creation, remove superflous setters! package Model; import java. io. Serializable; … import javax. xml. bind. annotation. Xml. Root. Element ; @Entity @Table(name = "user") //Table reference @Xml. Root. Element @Named. Queries({…}) //We do not use this part public class User implements Serializable { private static final long serial. Version. UID = 1 L; @Id @Generated. Value(strategy = Generation. Type. IDENTITY ) //---------Auto-generated datbase table field annotations -------@Basic(optional = false) @Column(name = "user. ID") private Integer user. ID; … @Basic(optional = false) @Not. Null @Size(min = 1, max = 16) @Column(name = "country") private String country; //-------Auto-generated costructor polymorphs---------------public User() {} public User(Integer user. ID) { this. user. ID = user. ID ; } public User( Integer user. ID, String user. Name, String password, String email, String given. Name, String sur. Name, String address, String city, String zip, String country) { this. user. ID = user. ID; this. user. Name = user. Name; this. password = password; this. email = email; this. given. Name = given. Name; this. sur. Name = sur. Name; this. address = address; this. city = city; this. zip = zip; this. country = country ; } //-----Auto-generated getters/setters, remove superflous!----------public Integer get. User. ID() { return user. ID; } public String get. User. Name() { return user. Name; } public void set. User. Name(String user. Name) { this. user. Name = user. Name ; }
11. Front→Back MVC: 11. 4. Login+Registration: Where we are now building MVC architecture? Func: login Jatek page(HTML, Ajax: request: o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend JS) Met: login „task”: „login” user. ID s SP: login IF: ”task”=”login” String: Inst: user „user. Name”: user. Name IN: user. Name. IN Json. Obj user. ID password request. get. Par „msg”=„ 1” tbx. User. Name. v IN: password. IN alue user. Name „user. Name” „password”: OUT: user. IDOUT user. password IF: integer? „password” IF: OK? tbx. Password. val login user. email IF: OK? user. given. Name New: user= New: user. Service String: ue IF: OK? Json. Obj Ajax: response: user. sur. Name em. find(user. ID) „msg”=„ 0” Location=index. Except: I/O user. address Session: user html user. city String: Func: is. Logged. Use IF: ”task”=”is. Logged. User” user. zip Json. Obj Ajax: request: user. country „msg”=„ 1” „task”: ”is. Logged. U Inst: user IF: OK? Ajax: response: is user. ID inp. Nev. val=user. N Log user. Name Location=login. html ged String: user. password User Json. Obj user. email „msg”=„ 0”Session: user. given. Name Func: logout user. sur. Name IF: ”task”=”logout” String: Ajax: request. : user. address Json. Obj user. city „task”: ”logout” „msg”=„ 1” Ajax: response user. zip user. country IF: OK? Location=login. htm Location=index. ht logout String: Func: register Inst: user SP: add. New. User Met: add. New. User Json. Obj Ajax: request: user. ID IN: user. Name. IN „task”: user. Name „msg”=„ 0” Session: null user. Name IN: password. IN ”register” password user. password IN: email. IN „user. Name”: IF: ”task”=”register”String: Email user. email IN: given. Name. IN tbx. Username. va Json. Obj user. given. Name IN: sur. Name. IN request. get. Par „msg”=„ 1” lue user. sur. Name IN: address. IN „password”: „user. Name” IF: OK? user. address Address add IN: city. IN tbx. Password. val „password” user. city IF: OK? City New IN: zip. IN „email” user. zip String: ue„email”: Zip User IN: country. IN user. country „given. Name” Json. Obj IF: OK? OUT: country Except: I/O „sur. Name” „msg”=„ 0” tbx. Email. value „address”: „address” tbx. Address. valu Registered SP: is. Registered „city” e User. Count Met: is. Registered „zip” IN: user. Name. IN „city”: user. Name „country” tbx. City. value IN: password. IN password „zip”: Is IN: email. IN email IF: OK? New: user. Service tbx. Zip. value Regis OUT: registered „country”: tered User. Count. OUT IF: OK? IF: equals(0)? tbx. Country. valu Except: I/O
11. Front→Back MVC: 11. 4. Login+Registration: login process animated Func: login Jatek page(HTML, Ajax: request: o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend JS) Met: login „task”: „login” user. ID s SP: login IF: ”task”=”login” String: Inst: user „user. Name”: user. Name IN: user. Name. IN Json. Obj user. ID password request. get. Par „msg”=„ 1” tbx. User. Name. v IN: password. IN alue user. Name „user. Name” „password”: OUT: user. IDOUT user. password IF: integer? „password” IF: OK? tbx. Password. val login user. email IF: OK? user. given. Name New: user= New: user. Service String: ue IF: OK? Json. Obj Ajax: response: user. sur. Name em. find(user. ID) „msg”=„ 0” Location=index. Except: I/O user. address Session: user html user. city user. zip user. country is Log ged User logout add New User Is Regis tered
11. Front→Back MVC: 11. 4. Login+Registration: is. Logged. User process animated Jatek o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend page(HTML, JS) s login is Log ged User logout add New User Is Regis tered Inst: user. ID user. Name user. password user. email user. given. Name user. sur. Name user. address user. city user. zip user. country String: Func: is. Logged. Use IF: ”task”=”is. Logged. User” Json. Obj Ajax: request: „msg”=„ 1” „task”: ”is. Logged. U IF: OK? Ajax: response: inp. Nev. val=user. N Location=login. html String: Json. Obj „msg”=„ 0”Session: user
11. Front→Back MVC: 11. 4. Login+Registration: logout process animated Jatek o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend page(HTML, JS) s login is Log ged User Func: logout Ajax: request. : „task”: ”logout” „msg”=„ 1” Ajax: response IF: OK? Location=login. htm Location=index. ht String: Json. Obj IF: ”task”=”logout” String: Json. Obj logout „msg”=„ 0” add New User Is Regis tered Session: null
11. Front→Back MVC: 11. 4. Login+Registration: add. New. User process animated Jatek o Database layer(XAMPP) Model layer(Entity Class) Service layer(Java Class)Controller layer (Servlets) Frontend page(HTML, JS) Met: login user. ID s SP: login Inst: user. Name IN: user. Name. IN user. ID password IN: password. IN user. Name OUT: user. IDOUT user. password IF: integer? login user. email IF: OK? user. given. Name New: user= user. sur. Name em. find(user. ID) IF: OK? Except: I/O user. address user. city user. zip user. country is Log ged User logout Inst: user SP: add. New. User user. ID IN: user. Name. IN user. Name IN: password. IN user. password IN: email. IN user. email IN: given. Name. IN user. given. Name IN: sur. Name. IN user. sur. Name IN: address. IN user. address add IN: city. IN user. city IF: OK? New IN: zip. IN user. zip User IN: country. IN user. country OUT: Except: I/O Registered SP: is. Registered User. Count IN: user. Name. IN IN: password. IN Is IN: email. IN Regis OUT: registered. IF: OK? tered User. Count. OUT Except: I/O Met: add. New. User user. Name password IF: ”task”=”register”String: Email Json. Obj given. Name request. get. Par „msg”=„ 1” sur. Name „user. Name” Address „password” IF: OK? City „email” String: Zip „given. Name” Json. Obj IF: OK? country „sur. Name” „msg”=„ 0” „address” „city” Met: is. Registered „zip” user. Name „country” password email New: user. Service IF: OK? IF: equals(0)? Func: register Ajax: request: „task”: ”register” „user. Name”: tbx. Username. va lue „password”: tbx. Password. val ue „email”: tbx. Email. value „address”: tbx. Address. valu e „city”: tbx. City. value „zip”: tbx. Zip. value „country”: tbx. Country. valu
References Frontend Backend development theories: https: //www. freecodecamp. org/news/is-mvc-dead-for-thefrontend-35 b 4 d 1 fe 39 ec/ https: //www. yiiframework. com/doc/guide/1. 1/en/basics. bestpractices https: //www. bbconsult. co. uk/blog/top-10 -javascript-mvcframeworks
List of Symbols General Symbols: DEF: definition, PRC: process, ALT: alternatives, CYC: cycle, : inference, : contradicts, / : dis/advantage, URL: webaddress DIR: directory, PCK: package, CLS: class, PRP: property MET: method EVN: event EXC: exception Symbols of Graphic User Interface: Aaa|Bbb|-Menu|Submenu, SCR: Screen, FRM: Frame, ID: Unique identifier, BTN: Button, TXB: Textbox, DDN: Dropdown, TAB: Multi. Tabs, CHK: Checkbox RAD: Radio button, TBL: Table COL: Table. Column, LIN: Table. Row, KEY: Keyboard, WRN: Popup warning ERR: Error message Logic Symbols: a&&b: a and b, a&b: binary and, a||b: a or b, a|b: binary or !a: not a Math Symbols: a = b passing value a == b value equals a === b value and type equals a. equals(b) class instance equals != value not equals a / b division or integer division a % b modulus of integer division a + b addition or concatenation Database Symbols: : Entity, ▬◄: 1: many relation ►▬: Many: 1 relation ---▬: independent/dependent side PK: Primary key FK: Foreign key UML Class Diagram Symbols: +PRP: public property, -PRP: private property, #PRP: protected property, ~PCK: package, /CLS: descendant class, Owner◄─Nested: nesting connection Ancestor∆┘Descendant: inheritance conn. Whole♦┘Oblig. Part: obligatory part
- Slides: 49