Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/worthant/simple-one-page-website
🕸️ Website with canvas graph validation
https://github.com/worthant/simple-one-page-website
canvas css html javascript php toastify-js
Last synced: 5 days ago
JSON representation
🕸️ Website with canvas graph validation
- Host: GitHub
- URL: https://github.com/worthant/simple-one-page-website
- Owner: worthant
- License: apache-2.0
- Created: 2023-08-03T21:58:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-26T16:39:57.000Z (about 1 year ago)
- Last Synced: 2024-10-12T09:48:44.291Z (about 1 month ago)
- Topics: canvas, css, html, javascript, php, toastify-js
- Language: HTML
- Homepage: https://se.ifmo.ru/~s368090/lab1/index.html
- Size: 5.05 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Table of Contents
- [Introduction](#intro)
- [Requirements for Laboratory Work](#requirements)
- [Preparation Topics](#preparation)
- [How to get everything working?](#setup)
- [User Manual](#manual)
- [Materials](#theory)
## Introduction
> Welcome to this laboratory project, a blend of essential web technologies. Here, I've developed a tool that combines `PHP`, `HTML`, `CSS`, and `JavaScript` to determine a point's position on a coordinate plane :smiley:
>
> - Users can seamlessly input data through an **interactive HTML interface**,
> which then utilizes `PHP for backend computations`.
> - With `JavaScript in play`, the tool ensures data integrity by `validating` user input.
>
> Dive in to explore how these technologies come together for a functional, user-friendly experience :computer:
## Requirements for variant 1204
||
|:-:|
1. [x] 1. Develop a `PHP script` that determines whether a point on the coordinate plane falls within a specified area.
```python
• The R parameter and the coordinates of the point should be passed to the script via an `HTTP request`.
• The script should:
├ perform `validation` of the data
└ return an `HTML page` with a table
└ the `table` should contain the received parameters and the result of the calculations
└ *i.e., the fact of the point falling or not falling into the area*
• Previous results should be preserved between requests and displayed in the table.
• The response should include data on the current time and the script execution time.
2. [x] 2. Create an HTML page that generates data for submission for processing by the PHP script.
```python
• `Block layout` should be used for positioning text and graphic elements.
• Form data should be sent for processing via a `GET request`.
• Stylesheets should be located in html file ().
• The HTML page should have a "header" containing:
├ student's full name
├ group number
└ variant number.
• When formatting the header, it is necessary to explicitly specify (in the cascading stylesheet):
├ font `(fantasy)`
├ font color
└ font size
• Input element margins should be specified in `percentages`.
```
3. [x] 3. In working with CSS, the use of the following should be demonstrated:
- [x] ID selectors
- [x] Pseudo-class selectors
- [x] Attribute selectors
- [x] Pseudo-element selectors
4. [x] 4. As well as such CSS style properties as:
- [x] inheritance
- [x] cascading
5. [x] 5. The page should contain a script in JavaScript
```python
• The script should validate values entered by the user in form fields
• Any incorrect values (letters in point coordinates / negative radius / ... ) should be blocked.
```
## Preparation Topics
```python
1. HTTP protocol. Structure of requests and responses, request methods, server response codes, request and response headers.
2. HTML markup language. Features, main tags and tag attributes.
3. Structure of an HTML page. Document Object Model (DOM).
4. HTML forms. Setting the HTTP request method. Rules for placing forms on pages, types of input fields.
5. Cascading Style Sheets (CSS). Structure - rules, selectors. Types of selectors, features of their application. Rule priorities. Advantages of CSS over direct style setting via tag attributes.
6. LESS, Sass, SCSS. Key features, comparative characteristics. Browser compatibility, translation into "ordinary" CSS.
7. Client scripts. Features, areas of application. JavaScript language.
8. ECMAScript versions, new features of ES6 and ES7.
9. Synchronous and asynchronous processing of HTTP requests. AJAX.
10. jQuery library. Purpose, main API. Usage for implementing AJAX and working with DOM.
11. Implementing AJAX using SuperAgent.
12. Server scripts. CGI - definition, purpose, key features.
13. FastCGI - features of the technology, advantages and disadvantages relative to CGI.
14. PHP language - syntax, data types, embedding in web pages, rules for handling HTTP requests. Features of the implementation of OOP principles in PHP.
```
## How to get everything working?
1. Open the terminal and navigate to the directory where you want to clone the repository:
```bash
cd path/to/your/workspace
```
2. Clone the repository:
```bash
SSH(recommended): [email protected]:worthant/simple-one-page-website.git
HTTPS: https://github.com/worthant/simple-one-page-website.git
```
3. Navigate to the project directory:
```bash
cd
```
4. Initialize the project using the package manager `yarn` (should be installed using `npm`):
```bash
yarn install
```
5. Compiles and hot-reloads for development
```bash
yarn dev
```
6. Open your browser and navigate to `http://localhost:3000/`
7. Change `deploy.sh` for your needs and deploy changes to server using `yarn deploy`
## User Manual
1. Fill in the form fields on the main page: enter the point coordinates and radius
2. Click the "Check" button to send the data for processing by the PHP script
3. The processing results will be displayed in the table on the main page
## Materials
1. **My laboratory work report** : [google drive](https://docs.google.com/document/d/1cnjDA5CiydwgdM9iV6ZE5V2yf7SVOAap/edit?usp=sharing&ouid=113751677932979310082&rtpof=true&sd=true)
1. **URI** - **URL** - **URN** :
2. **Web docs 1** :
3. **Web docs 2** :
4. **Pretty good guide for se.ifmo questions** : [guide](https://docs.google.com/document/u/0/d/13eAoOwDXg1enr3eFeawcM76AAhufZljDA4XYcNYAyDg/mobilebasic)
