Skip to content

Commit

Permalink
📚 Synchronized translations, completed docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@worthant
worthant committed Sep 14, 2023
1 parent 43a5f02 commit efc5a1d
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 121 deletions.
146 changes: 64 additions & 82 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,31 +25,34 @@
<details open>
<summary><b>Table of Contents</b></summary>

- [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)

</details>

<a id="intro"></a>
<details open>
<summary><h2><b> Introduction </b></h2></summary>

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.
</details>

## Introduction

<a id="requirements"></a>
<details>
<summary><h2><b> Requirements for variant 1204 </b></h2></summary>
> 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:
Expand All @@ -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`.
Expand All @@ -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.
```
</details>


<a id="preparation"></a>
<details>
<summary><h2><b> Preparation Topics </b></h2></summary>
## Preparation Topics

```python
1. HTTP protocol. Structure of requests and responses, request methods, server response codes, request and response headers.
Expand All @@ -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.
```
</details>

<a id="setup"></a>
<details>
<summary><h2><b> How to get everything working? </b></h2></summary>
## 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 <your_repo>
```

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`
</details>

<a id="manual"></a>
<details>
<summary><h2><b> User Manual </b></h2></summary>
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)
</details>

<a id="theory"></a>
<details>
<summary><h2><b> Theoretical materials </b></h2></summary>
## Theoretical materials </b></h2></summary>

1. **URI** - **URL** - **URN** : https://wiki.merionet.ru/articles/url-i-uri-v-chem-razlichie/
</details>
1. **URI** - **URL** - **URN** : <https://wiki.merionet.ru/articles/url-i-uri-v-chem-razlichie/>
2. **Web docs 1** : <https://www.w3schools.com/css/css3_borders.asp>
3. **Web docs 2** : <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th>
4. **Pretty good guide for se.ifmo questions** : [guide](https://docs.google.com/document/u/0/d/13eAoOwDXg1enr3eFeawcM76AAhufZljDA4XYcNYAyDg/mobilebasic)
115 changes: 76 additions & 39 deletions README_RU.md
View file
Original file line number Diff line number Diff line change
@@ -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-скрипт`, определяющий попадание точки на координатной плоскости в заданную область
<p align="center">
<a href="https://ibb.co/Sv4F0Yq">
<picture>
<img src="https://i.ibb.co/nkNxfdh/html.png" height="110">
</picture>
<h1 align="center">Простой одностраничный сайтик</h1>
</a>
</p>

<p align="center">
<a aria-label="Размер репозитория" href="https://github.com/worthant/simple-one-page-website">
<img alt="" src="https://img.shields.io/github/repo-size/worthant/simple-one-page-website?style=for-the-badge&logo=github">
</a>
<a aria-label="Английская версия" href="./README_RU.md">
<img alt="" src="https://img.shields.io/badge/translation-RU-red?style=for-the-badge">
</a>
<a aria-label="Сборка" href="https://github.com/worthant/simple-one-page-website/actions">
<img alt="" src="https://img.shields.io/github/actions/workflow/status/worthant/simple-one-page-website/php.yaml?branch=main&style=for-the-badge&logo=github-actions">
</a>
<a aria-label="Лицензия" href="./LICENSE">
<img alt="" src="https://img.shields.io/github/license/worthant/simple-one-page-website?style=for-the-badge">
</a>
</p>

<details open>
<summary><b>Оглавление</b></summary>

- [Введение](#введение)
- [Требования для выполнения варианта `1204`](#требования)
- [Темы для подготовки к защите лабораторной работы](#защита)
- [Как запустить чтобы всё работало?](#как-запустить-чтобы-всё-работало)
- [Руководство по эксплуатации](#руководство-по-эксплуатации)
- [Теоретические материалы](#теоретические-материалы)

</details>

## Введение

> Добро пожаловать в этот лабораторный проектик - совокупность ключевых веб-технологий. Здесь я создал ресурс, разработка которого включает `PHP`, `HTML`, `CSS`, и `JavaScript`. А назначение сайта - небольшая игра. Попал ты точкой в координатную плоскость или промахнулся :smiley:
>
> - Пользователи могут легко вводить данные через **интерактивный HTML-интерфейс**,
> который затем использует `PHP для вычислений на серверной стороне`.
> - С `JavaScript` я обеспечиваю целостность данных, проводя `валидацию` ввода пользователя.
>
> Погрузитесь в изучение, чтобы исследовать, как эти технологии совмещаются для создания функционального, удобного для пользователя веб-сайта :computer:
<a id="требования"></a>

## Требования для выполнения варианта `1204`

1. [x] 1. Разработать `PHP-скрипт`, определяющий попадание точки на координатной плоскости в заданную область

```python
• Параметр R и координаты точки должны передаваться скрипту посредством `HTTP-запроса`.
Expand All @@ -22,7 +61,7 @@
• Ответ должен содержать данные о текущем времени и времени работы скрипта.
```

2. [ ] 2. Создать `HTML-страницу`, которая формирует данные для отправки их на обработку php-скрипту.
2. [x] 2. Создать `HTML-страницу`, которая формирует данные для отправки их на обработку php-скрипту.

```python
• Для расположения текстовых и графических элементов необходимо использовать `блочную верстку`.
Expand All @@ -40,21 +79,23 @@
```

3. При работе с CSS должно быть продемонстрировано использование:
- [ ] `селекторов идентификаторов`
- [ ] `селекторов псевдоклассов`
- [ ] `селекторов потомств`
- [ ] `селекторов атрибутов`
- [x] `селекторов идентификаторов`
- [x] `селекторов псевдоклассов`
- [x] `селекторов потомств`
- [x] `селекторов атрибутов`
4. А также такие свойства стилей CSS, как
- [ ] `наследование`
- [ ] `каскадирование`
- [x] `наследование`
- [x] `каскадирование`

5. [ ] 5. Страница должна содержать сценарий на языке `JavaScript`
5. [x] 5. Страница должна содержать сценарий на языке `JavaScript`

```python
• Сценарий должен осуществлять валидацию значений, вводимых пользователем в поля формы
• Любые некорректные значения (буквы в координатах точки / отрицательный радиус / ... ) должны блокироваться.
```

<a id="защита"></a>

## Темы для подготовки к защите лабораторной работы

```python
Expand Down Expand Up @@ -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. Перейдите в директорию проекта:
Expand All @@ -95,38 +136,34 @@
cd <your_repo>
```

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`

## Руководство по эксплуатации

1. Заполните поля формы на главной странице: введите координаты точки и радиус
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/
1. **URI** - **URL** - **URN** : <https://wiki.merionet.ru/articles/url-i-uri-v-chem-razlichie/>

2. **Web docs 1** : <https://www.w3schools.com/css/css3_borders.asp>

3. **Web docs 2** : <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th>

4. **Достойный гайд на вопросы с se.ifmo** : [guide](https://docs.google.com/document/u/0/d/13eAoOwDXg1enr3eFeawcM76AAhufZljDA4XYcNYAyDg/mobilebasic)

0 comments on commit efc5a1d

Please sign in to comment.