diff --git a/README.md b/README.md index 65a3622..ac40240 100644 --- a/README.md +++ b/README.md @@ -25,31 +25,34 @@
Table of Contents - - [Introduction](#intro) - - [Requirements for Laboratory Work](#requirements) - - [Preparation Topics](#preparation) - - [How to get everything working?](#setup) - - [User Manual](#manual) - - [Theoretical materials](#theory) +- [Introduction](#intro) +- [Requirements for Laboratory Work](#requirements) +- [Preparation Topics](#preparation) +- [How to get everything working?](#setup) +- [User Manual](#manual) +- [Theoretical 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. 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. -
- +## Introduction - -
-

Requirements for variant 1204

+> 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 |![изображение](https://github.com/worthant/simple-one-page-website/assets/43885024/4e3bc97e-313b-4592-9476-2a8cd112fe10)| |:-:| - - 1. [ ] 1. Develop a `PHP script` that determines whether a point on the coordinate plane falls within a specified area. - + + 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: @@ -59,9 +62,9 @@ └ *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. [ ] 2. Create an HTML page that generates data for submission for processing by the PHP script. - + + 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`. @@ -76,29 +79,25 @@ └ font size • Input element margins should be specified in `percentages`. ``` - - 3. [ ] 3. In working with CSS, the use of the following should be demonstrated: - - [ ] ID selectors - - [ ] Pseudo-class selectors - - [ ] Attribute selectors - - [ ] Pseudo-element selectors - - 4. [ ] 4. As well as such CSS style properties as: - - [ ] inheritance - - [ ] cascading - - 5. [ ] 5. The page should contain a script in JavaScript - + + 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

+## Preparation Topics ```python 1. HTTP protocol. Structure of requests and responses, request methods, server response codes, request and response headers. @@ -116,70 +115,53 @@ 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?

+## 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): git@github.com:worthant/web-programming.git - HTTPS: https://github.com/worthant/web-programming.git + SSH(recommended): git@github.com: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`: - - ```bash - yarn init - ``` - - - for now, you can skip all questions by pressing "enter" - - 5. Install `http-server` - a simple static server: - + + 4. Initialize the project using the package manager `yarn` (should be installed using `npm`): + ```bash - yarn add http-server + yarn install ``` - - 6. Start the server: - + + 5. Compiles and hot-reloads for development + ```bash - yarn http-server + yarn dev ``` - - - by default, the **http-server** package will start the server on port 8080 - - to change the port: `yarn http-server -p 3000` - 7. Open your browser and navigate to `http://localhost:8080` -
- -
-

User Manual

+ 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 "Submit" button to send the data for processing by the PHP script + 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 - - - Demonstration in the [youtube tutorial video](https://youtu.be/dQw4w9WgXcQ?t=90) -
- -
-

Theoretical materials

+## Theoretical materials - 1. **URI** - **URL** - **URN** : https://wiki.merionet.ru/articles/url-i-uri-v-chem-razlichie/ -
+ 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) diff --git a/README_RU.md b/README_RU.md index 8e10a94..49d1bc7 100644 --- a/README_RU.md +++ b/README_RU.md @@ -1,15 +1,54 @@ -# Лабораторная работа 1 ![Build Status](https://github.com/worthant/web-programming/actions/workflows/build/badge.svg) - -- [Лабораторная работа 1 ](#лабораторная-работа-1-) - - [Требования для выполнения лабораторной работы №1 варианта `1`](#требования-для-выполнения-лабораторной-работы-1-варианта-1) - - [Темы для подготовки к защите лабораторной работы](#темы-для-подготовки-к-защите-лабораторной-работы) - - [Как запустить чтобы всё работало?](#как-запустить-чтобы-всё-работало) - - [Руководство по эксплуатации](#руководство-по-эксплуатации) - - [Теоретические материалы](#теоретические-материалы) - -## Требования для выполнения лабораторной работы №1 варианта `1` - -1. [ ] 1. Разработать `PHP-скрипт`, определяющий попадание точки на координатной плоскости в заданную область +

+ + + + +

Простой одностраничный сайтик

+ +

+ +

+ + + + + + + + + + + + +

+ +
+ Оглавление + +- [Введение](#введение) +- [Требования для выполнения варианта `1204`](#требования) +- [Темы для подготовки к защите лабораторной работы](#защита) +- [Как запустить чтобы всё работало?](#как-запустить-чтобы-всё-работало) +- [Руководство по эксплуатации](#руководство-по-эксплуатации) +- [Теоретические материалы](#теоретические-материалы) + +
+ +## Введение + +> Добро пожаловать в этот лабораторный проектик - совокупность ключевых веб-технологий. Здесь я создал ресурс, разработка которого включает `PHP`, `HTML`, `CSS`, и `JavaScript`. А назначение сайта - небольшая игра. Попал ты точкой в координатную плоскость или промахнулся :smiley: +> +> - Пользователи могут легко вводить данные через **интерактивный HTML-интерфейс**, +> который затем использует `PHP для вычислений на серверной стороне`. +> - С `JavaScript` я обеспечиваю целостность данных, проводя `валидацию` ввода пользователя. +> +> Погрузитесь в изучение, чтобы исследовать, как эти технологии совмещаются для создания функционального, удобного для пользователя веб-сайта :computer: + + + +## Требования для выполнения варианта `1204` + +1. [x] 1. Разработать `PHP-скрипт`, определяющий попадание точки на координатной плоскости в заданную область ```python • Параметр R и координаты точки должны передаваться скрипту посредством `HTTP-запроса`. @@ -22,7 +61,7 @@ • Ответ должен содержать данные о текущем времени и времени работы скрипта. ``` -2. [ ] 2. Создать `HTML-страницу`, которая формирует данные для отправки их на обработку php-скрипту. +2. [x] 2. Создать `HTML-страницу`, которая формирует данные для отправки их на обработку php-скрипту. ```python • Для расположения текстовых и графических элементов необходимо использовать `блочную верстку`. @@ -40,21 +79,23 @@ ``` 3. При работе с CSS должно быть продемонстрировано использование: - - [ ] `селекторов идентификаторов` - - [ ] `селекторов псевдоклассов` - - [ ] `селекторов потомств` - - [ ] `селекторов атрибутов` + - [x] `селекторов идентификаторов` + - [x] `селекторов псевдоклассов` + - [x] `селекторов потомств` + - [x] `селекторов атрибутов` 4. А также такие свойства стилей CSS, как - - [ ] `наследование` - - [ ] `каскадирование` + - [x] `наследование` + - [x] `каскадирование` -5. [ ] 5. Страница должна содержать сценарий на языке `JavaScript` +5. [x] 5. Страница должна содержать сценарий на языке `JavaScript` ```python • Сценарий должен осуществлять валидацию значений, вводимых пользователем в поля формы • Любые некорректные значения (буквы в координатах точки / отрицательный радиус / ... ) должны блокироваться. ``` + + ## Темы для подготовки к защите лабораторной работы ```python @@ -85,8 +126,8 @@ 2. Cклонируйте репозиторий: ```bash - SSH(recommended): git@github.com:worthant/web-programming.git - HTTPS: https://github.com/worthant/web-programming.git + SSH(recommended): git@github.com:worthant/simple-one-page-website.git + HTTPS: https://github.com/worthant/simple-one-page-website.git ``` 3. Перейдите в директорию проекта: @@ -95,29 +136,21 @@ cd ``` -4. Инициализируйте проект с помощью пакетного менеджера `yarn`: +4. Инициализируйте проект с помощью пакетного менеджера `yarn` (должен быть установлен с помощью `npm`): ```bash - yarn init + yarn install ``` - - пока можно проскипать все вопросы на "enter" - -5. Ставим `http-server` - простой статический сервер: +5. Запускаем режим разработки с автообновлением страницы ```bash - yarn add http-server + yarn dev ``` -6. Запускаем сервер: - - ```bash - yarn http-server - ``` +6. Откройте браузер и перейдите на `http://localhost:3000/` - - по умолчанию пакет **http-server** запустит сервер на порте 8080 - - чтобы поменять порт: `yarn http-server -p 3000` -7. Откройте браузер и перейдите на `http://localhost:8080` +7. Поменяйте `deploy.sh` для ваших собственных нужд и сделайте деплой готового проекта на сервер с помощью `yarn deploy` ## Руководство по эксплуатации @@ -125,8 +158,12 @@ 2. Нажмите кнопку "Отправить", чтобы отправить данные на обработку PHP-скрипту 3. Результаты обработки будут отображаться в таблице на главной странице -- Демонстрация работы в [разборе на youtube](https://youtu.be/dQw4w9WgXcQ?t=90) - ## Теоретические материалы -1. **URI** - **URL** - **URN** : https://wiki.merionet.ru/articles/url-i-uri-v-chem-razlichie/ \ No newline at end of file +1. **URI** - **URL** - **URN** : + +2. **Web docs 1** : + +3. **Web docs 2** : + +4. **Достойный гайд на вопросы с se.ifmo** : [guide](https://docs.google.com/document/u/0/d/13eAoOwDXg1enr3eFeawcM76AAhufZljDA4XYcNYAyDg/mobilebasic)