Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/worthant/mvc-geovalidator
🕸️ Website with canvas graph validation
https://github.com/worthant/mvc-geovalidator
canvas css java javascript jsp servlet-mvc wildfly
Last synced: 8 days ago
JSON representation
🕸️ Website with canvas graph validation
- Host: GitHub
- URL: https://github.com/worthant/mvc-geovalidator
- Owner: worthant
- License: apache-2.0
- Created: 2023-09-14T22:52:04.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-22T22:12:09.000Z (about 1 year ago)
- Last Synced: 2024-11-11T06:47:24.770Z (2 months ago)
- Topics: canvas, css, java, javascript, jsp, servlet-mvc, wildfly
- Language: Java
- Homepage:
- Size: 6.58 MB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Table of Contents
- [Demonstration](#demonstration)
- [Description](#description)
- [Requirements for Variant `11117312`](#requirements)
- [Topics for Lab Defense](#defense)
- [How to Deploy *Your* Lab on Helios](#deployment)
- [User Manual for My Lab](#user-manual-for-my-lab)
- [Theoretical Materials](#theoretical-materials)
## Demonstration 🎥
|  |
|-------------------------------------------------------------------------------------------------------------------------------------------|
## Description 📝
> 👋 **Welcome to this lab project!**
>
> 🛠 **What is it?**
> This is a servlet and JSP-based web application implemented following the `MVC pattern`.
>
> 🎯 **Purpose of the Website**
> To determine if a point falls within a specified area on the coordinate plane 😎
>
> ---
>
> 📌 **Key Features**
>
> - 🖥 Users can easily input data through an **HTML page with a web form**, generated by a `JSP page`.
> - 📊 The `servlets.AreaCheckServlet` is then used to check if the point falls within the specified area.
> - 🔒 With `JavaScript`, I ensure data integrity by performing `validation` on user input.
>
> ---
>
> 🚀 **Dive in to explore** how these technologies come together to create a functional, user-friendly web application 💻
## Requirements for Variant `11117312`
|  |
|:------------------------------------------------------------------------------------------------------------------:|
### Goal: Development of a Web Application using *Servlets* and *JSP*
#### 📋 Core Components (following MVC pattern):
- [x] `servlets.ControllerServlet`: Identifies the type of request and delegates its processing to one of the components
listed below, if the request contains information about the coordinates of the point and the radius. All requests
within the application should be forwarded to this servlet using `POST`.
- [x] `servlets.AreaCheckServlet`: Checks if the point falls within the area and generates an HTML page with the
results. Should handle all requests that contain information about the coordinates of the point and the radius of the
area.
- [x] `JSP Page`: Generates an HTML page with a web form for data input and a diagram. Should handle all requests that
do not contain information about the coordinates of the point and the radius of the area.
#### 🎨 The JSP Page should include:
1. [x] Header: Full name, group number, variant number.
2. [x] Form: Sends data to the server.
3. [x] Set of fields: For specifying the coordinates of the point and the radius of the area according to the assignment
variant.
4. [x] Validation: JavaScript script to validate the data entered into the form.
5. [x] 🟠 Interactive Element:
- [x] With a set radius, clicking on the image sends the coordinates to the server.
- [x] Otherwise, displays a warning.
- [x] Refreshes the diagram after checking for a hit.
- [x] Responsive diagram: Redraws all points depending on whether they fall within the area or not upon radius
change.
6. [x] Table of results from previous checks. The list of results should be retrieved from a `Bean component`.
#### 📊 The page returned by servlets.AreaCheckServlet should include:
1. [x] Table containing the received parameters.
2. [x] Computation Results: Hit / Miss.
3. [x] Link to the web form for a new request (if you have one page instead of two, do nothing).
#### 🌐 Deployment:
- [x] The developed web application must be deployed on a `WildFly` server in standalone configuration. Ports should be
configured according to the provided `portbase`, and access to the http listener should be open for all IPs.
## Topics for Lab Defense Preparation
1. [x] Java servlets. Implementation features, key methods, advantages and disadvantages compared to CGI and FastCGI.
2. [x] Servlet containers. Servlet lifecycle.
3. [x] Request dispatching in servlets. Servlet filters.
4. [x] HTTP sessions - purpose, how servlets interact with the session, methods of session ID transmission.
5. [x] Servlet context - purpose, how servlets interact with the context.
6. [x] JavaServer Pages. Features, advantages and disadvantages compared to servlets, application areas.
7. [x] JSP lifecycle.
8. [x] Structure of a JSP page. Comments, directives, declarations, scriptlets, and expressions.
9. [x] Rules for writing Java code within JSP. Standard variables accessible in scriptlets and expressions.
10. [x] Bean components and their usage in JSP.
11. [x] Standard JSP tags. Using Expression Language (EL) in JSP.
12. [x] JSP configuration parameters in web application deployment descriptor.
13. [x] Design patterns and architectural patterns. Usage in web applications.
14. [x] Web application architecture. MVC pattern. Architectural models Model 1 and Model 2 and their implementation on
the Java EE platform.
## How to Deploy *Your* Lab on Helios to Make it Work?
1. Download and unpack WildFly. You can run those commands on helios:
```bash
curl https://download.jboss.org/wildfly/21.0.0.Final/wildfly-21.0.0.Final.zip -o wildfly.zip
unzip wildfly.zip -d wildfly
```
2. Upload `war` to helios and put it to the `~/wildfly/wildfly-21.0.0.Final/standalone/deployments/` directory.
> - You can change my `deploy.sh` with your ISU respectively and deploy using it (`./deploy.sh`)
> - [How to Connect and Upload Files to Helios](https://github.com/Imtjl/1st-year-guide#Connection)
3. In `~/wildfly/wildfly-21.0.0.Final/standalone/configuration/standalone.xml`, change:
> Just `vim standalone.xml`, then press `i` for `insert` and edit. To save and exit vim, press `Esc` and
> type `:wq`
```xml
```
to
```xml
```
---
Further Task:
- Change the default port to your `portbase`.
- IMPORTANT! Change all other ports so that there are no errors (`already in use`, etc.) when the server starts.
> As soon as I changed all the ports - all my servlets became visible and the server started working, before that I
> settled for 404
```xml
...
...
```
to
```xml
```
! where **portbase** - a number from the Google journal, you can also add 1 to 99 to it, because portbase is given assuming
that 99 ports following it are also yours.
For example, my portbase is `32318`. It is given assuming that 99 ports following it are also mine, so I wrote any ports
greater than 32318 by 1-99 and my `standalone.xml` turned out to be:
```xml
```
4. Connect to helios, forwarding ports using the command:
```bash
ssh -p 2222 s******@se.ifmo.ru -L :helios.cs.ifmo.ru:
```
> The ssh command's -L argument means that the port on the local host should be forwarded to the specified host and port on the remote side.
5. Start the server:
```bash
bash ~/wildfly/wildfly-21.0.0.Final/bin/standalone.sh
```
6. Navigate to the URL in the browser: http://localhost:8080/war_name.
## Guide for using my lab
- Deploy on Helios, forward the ports to yourself.
You can enter my s368090:
```bash
ssh [email protected] -p 2222
```
Run standalone.sh:
```bash
bash ~/wildfly/wildfly-21.0.0.Final/bin/standalone.sh
```
And forward the ports (in another terminal) as follows:
```bash
ssh -L 32318:localhost:32318 [email protected] -p 2222
```
Now open in the browser: http://localhost:32318/MVC-GeoValidator/ (or any other port that you have forwarded)
Operational Recommendations
- **Lab Functionality**: Play with the points on the graph. Points will appear green or red depending on hits.
- **Validation**: Full data validation is performed on both the client and server side.
- **Additional Info**: The lab follows AJAX principles. Each server request adds a row to the table in the Bean, which is then filled using table.jsp.
## Theoretical materials
1. **My breakdown of theoretical questions**: [theory.md](./theory.md)
2. **Official web presentation from se.ifmo**: https://se.ifmo.ru/~s367837/internet.pdf
3. **Oracle Documentation on Java EE APIs**: https://docs.oracle.com/javaee/7/api/index.html
4. **Question Breakdown by EgorMit**: [Lab2.md](https://github.com/EgorMIt/ITMO/blob/master/2%20-%20%D0%92%D0%B5%D0%B1-%D0%9F%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5/Lab2.md)
5. **Web docs 1**:
6. **Web docs 2**:
7. **Interesting guide to questions from se.ifmo**: [guide](https://docs.google.com/document/d/1ERKz7M5CnF_sDTW6Fkhw4zmlbiLbEUtRtWUz8PIujSQ/edit)
8. (`Recommended for the web programming course if anything is unclear`) - [Introduction to enterprise](https://javarush.com/groups/posts/2514-vvedenie-v-enterprise-razrabotku)
> - Network, client-server, HTTP/HTTPS, Maven, Servlets, Servlet Containers, MVC
