上传   管理   搜索   留言
Pudn.com > 下载中心  > collect  > SportNews
SportNews
javascript html API php sports 
去下载(0) 赞(2) 踩(0) 评论(0) 收藏(0)
所属分类：collect
开发工具：CSS
文件大小：0KB
下载次数：0
上传日期：2021-09-02 18:51:13
上 传 者：sh-1993
说明：  体育新闻，
(SportNews,)
文件列表:
LICENSE (1077, 2021-01-05)
articles/ (0, 2021-01-05)
articles/article.php (848, 2021-01-05)
articles/index.php (1079, 2021-01-05)
articles/search.php (1407, 2021-01-05)
assets/ (0, 2021-01-05)
assets/LICENSE.txt (17065, 2021-01-05)
assets/css/ (0, 2021-01-05)
assets/css/fontawesome-all.min.css (55969, 2021-01-05)
assets/css/main.css (61733, 2021-01-05)
assets/css/main_modified.css (60643, 2021-01-05)
assets/js/ (0, 2021-01-05)
assets/js/breakpoints.min.js (2438, 2021-01-05)
assets/js/browser.min.js (1850, 2021-01-05)
assets/js/jquery.min.js (88145, 2021-01-05)
assets/js/main.js (5707, 2021-01-05)
assets/js/util.js (11847, 2021-01-05)
assets/sass/ (0, 2021-01-05)
assets/sass/base/ (0, 2021-01-05)
assets/sass/base/_page.scss (977, 2021-01-05)
assets/sass/base/_reset.scss (1494, 2021-01-05)
assets/sass/base/_typography.scss (2936, 2021-01-05)
assets/sass/components/ (0, 2021-01-05)
assets/sass/components/_actions.scss (1029, 2021-01-05)
assets/sass/components/_box.scss (490, 2021-01-05)
assets/sass/components/_button.scss (1673, 2021-01-05)
assets/sass/components/_contact.scss (760, 2021-01-05)
assets/sass/components/_features.scss (2764, 2021-01-05)
assets/sass/components/_form.scss (3746, 2021-01-05)
assets/sass/components/_icon.scss (450, 2021-01-05)
assets/sass/components/_icons.scss (424, 2021-01-05)
assets/sass/components/_image.scss (1034, 2021-01-05)
assets/sass/components/_list.scss (837, 2021-01-05)
assets/sass/components/_mini-posts.scss (547, 2021-01-05)
assets/sass/components/_pagination.scss (1310, 2021-01-05)
assets/sass/components/_posts.scss (2908, 2021-01-05)
assets/sass/components/_row.scss (600, 2021-01-05)
assets/sass/components/_section.scss (733, 2021-01-05)
... ...

Documentao

Projeto simples de um Portal de Notícias sobre Esporte .

Tópicos

* [Pré-requisitos](https://github.com/heitor-am/SportNews/blob/master/#requisitos) * [Preparando o Banco de Dados](https://github.com/heitor-am/SportNews/blob/master/#bd) * [Tecnologias](https://github.com/heitor-am/SportNews/blob/master/#tecnologias) * [Homepage](https://github.com/heitor-am/SportNews/blob/master/#homepage) * [Login e Artigos](https://github.com/heitor-am/SportNews/blob/master/#artigos) * [Página de artigo](https://github.com/heitor-am/SportNews/blob/master/#artigo) * [Sistema de pesquisa](https://github.com/heitor-am/SportNews/blob/master/#pesquisa) * [Filtragem por categoria](https://github.com/heitor-am/SportNews/blob/master/#categoria) * [API](https://github.com/heitor-am/SportNews/blob/master/#api) * [Economia de código](https://github.com/heitor-am/SportNews/blob/master/#economia) * [LICENSE](https://github.com/heitor-am/SportNews/blob/master/#licenca)

Pré-requisitos

Antes de comear, você vai precisar ter instalado em sua máquina as seguintes ferramentas:

- [x] Apache - [x] MySQL - [x] PHP

Além disto é bom ter um editor para trabalhar com o código como VSCode

Preparando o Banco de Dados

0 Acesse o diretório onde vai ficar o projeto, no terminal/cmd:

```bash $ cd /var/www/html/ ```

1 Clone este repositório:

```bash $ git clone https://github.com/heitor-am/SportNews ```

2 Vá para o diretório db:

```bash $ cd /SportNews/db ```

3 Execute o arquivo init.sql, no MySQL:

```bash $ sudo mysql mysql> source /var/www/html/SportNews/db/init.sql; ```

Pronto, agora o Banco de Dados está preparado para executar o arquivo SportNews/index.php.

Tecnologias

As seguintes ferramentas foram usadas na construo do projeto: - - - - - - -

Homepage

No arquivo index.php, onde é tratado a homepage do site, logo no início do código, é feita uma requisio ao banco de dados.

~~~php ~~~

Nessa requisio, os sete últimos artigos publicados no Banco de Dados so colocados em um array associativo, que por sua vez, é usado para manipular a distribuio das notícias ao longo da página.

Como exemplo, tem-se o artigo principal da página:

O artigo principal sempre é o mais recente, portanto, está na posio “0” no array, e, dessa forma, é posto na página, distribuindo as informaes no HTML conforme as keys do array associativo (‘title’, ‘time’, ‘subtitle’, …).

~~~php ~~~

E isso acontece com todos os demais artigos que aparecem na homepage.

Login e Artigos

Para que o redator possa criar um novo artigo, ele primeiro precisa logar no sistema. A opo para login fica na sidebar.

Clicando no boto, um pop-up aparece na tela onde so solicitadas as informaes de login: Nome do usuário e Senha.

~~~php ~~~

Ao clicar no boto Login, todas as informaes inseridas nos inputs so enviadas, através do método POST, ao arquivo /redator/login.php, onde é verificado se os dados recebidos esto contidos no Banco de dados.

~~~php if (isset($_POST['btn-login'])) { $errors = array(); $username = mysqli_escape_string($connect, $_POST['uname']); $password = mysqli_escape_string($connect, $_POST['psw']); $query = "SELECT username FROM redator WHERE username = '$username'"; $result = mysqli_query($connect, $query); if (mysqli_num_rows($result) > 0) { $password = md5($password); $query = "SELECT * FROM redator WHERE username = '$username' AND password = '$password'"; $result = mysqli_query($connect, $query); if (mysqli_num_rows($result) == 1) { $redator = mysqli_fetch_array($result); mysqli_close($connect); $_SESSION['logado'] = true; $_SESSION['user_id'] = $redator['id']; header('Location: ./'); } else { $errors[] = "Senha incorreta"; } } else { $errors[] = "Usuário inexistente"; } } if (!empty($errors)) { foreach ($errors as $error) { alerta("error", "Oops...", $error); echo ""; } } ~~~

Se as informaes forem autenticadas, o redator será direcionado à página de edio de artigos.

Após preencher os campos de texto, o redator clica em Preview, onde os inputs so inseridos dentro de um array, e acaba sendo direcionado a uma página que mostra uma pré-visualizao do seu artigo, dessa forma, ele pode verificar o resultado final sem que haja a necessidade de enviar ao Banco de Dados.

~~~php $content = array( "category" => $_POST["category"], "editor" => $_POST["editor"], "main_image" => $_POST["main_image"], "title" => $_POST["title"], "subtitle" => $_POST["subtitle"], "content" => $_POST["content"] ); ~~~

Trecho do código preview.php, onde os conteúdos dos inputs so inseridos em um array.

Observe que há duas opes: Voltar, caso o redator no tenha gostado do resultado do artigo, e Enviar, caso a demonstrao tenha sido aprovada.

Ao clicar em Enviar, o array com o conteúdo do artigo é enviado ao arquivo /redator/commit_data.php, através do método POST.

~~~php

"; ?>

Voltar
~~~

Trecho do código preview.php, onde o conteúdo do artigo é preparado para ser enviado ao arquivo commit_data.php

Obs: O arquivo commit_data.php depende do arquivo /db/db_connect.php, onde é estabelecida a conexo com o Banco de Dados.

~~~php No arquivo commit_data.php, onde os dados foram recebidos, é feito um INSERT na base de dados com todo o conteúdo do artigo.

~~~php $now = date("d/m/Y H:i"); $query = "INSERT INTO articles (category, editor, time, main_image, title, subtitle, content) VALUES (" . "'" . $content["category"] . "'," . "'" . $content["editor"] . "'," . "'" . $now . "'," . "'" . $content["main_image"] . "'," . "'" . $content["title"] . "'," . "'" . $content["subtitle"] . "'," . "'" . $content["content"] . "');"; if (mysqli_query($connect, $query)) { alerta("success", "Artigo enviado com sucesso!", false); echo ""; // Encerrando a sesso session_start(); session_unset(); session_destroy(); } else { echo "Error: " . $query . "
" . mysqli_error($connect); } ~~~

A tabela articles possui a seguinte estrutura:

Página do artigo

Cada link de artigo localizado na homepage tem seu boto de redirecionamento para a apresentao completa, o boto sobre.

Ao clicar no boto, o usuário é direcionado ao arquivo /articles/article.php, tendo como parmetro o id do artigo.

~~~php ~~~

Recebendo o id do artigo, o arquivo article.php faz uma REQUEST no Banco de Dados para que as informaes daquele artigo em específico sejam extraídas.

~~~php if (isset($_GET['id'])) { $id = $_GET['id']; $id = mysqli_escape_string($connect, $id); $query = "SELECT * FROM articles WHERE id=$id"; $result = mysqli_query($connect, $query); while ($row = mysqli_fetch_assoc($result)) { echo "
" . "

" . $row['title'] . "

" . "

" . $row['subtitle'] . "

" . "

Por " . $row['editor'] . "

" . $row['content'] . "
"; } mysqli_close($connect); } ~~~

Sistema de pesquisa

Caso o usuário procure por um artigo específico, ele pode optar por digitar uma palavra de seu interesse na barra de pesquisa localizada na sidebar.

Ao digitar uma palavra e pressionar a tecla Enter, o formulário, onde está localizado a barra de pequisa, aciona o arquivo /articles/search.php, que, por sua vez, através do método GET, recebe o conteúdo do input e, logo após, faz uma requisio à Base de Dados para receber todos os artigos que possuam o título relacionado ao que foi digitado na barra de pesquisa.

~~~php if (isset($_GET['query'])) { $search = $_GET['query']; $search = mysqli_escape_string($connect, $search); $query = "SELECT * FROM articles WHERE title LIKE '%$search%' ORDER BY id DESC"; $result = mysqli_query($connect, $query); while ($row = mysqli_fetch_assoc($result)) { $array[] = $row; } mysqli_close($connect); } ~~~

Caso a busca seja favorável, os artigos envolvidos so enviados à tela.

~~~php "; foreach ($array as $a) { echo "
" . "

" . $a['title'] . "

" . "

" . $a['time'] . "

" . "
"; } echo "
"; } else { echo "

Nenhum resultado encontrado :(

" . "

Sua busca por \"" . $search . "\" no retornou resultados.
" . "Tente novamente com outros termos.

"; } ?> ~~~

Filtragem por categoria

Na sidebar, o usuário pode filtrar os artigos existentes com base em sua categoria.

Ao clicar em uma das categorias listadas, o usuário é redirecionado a https://localhost/SportNews/articles/?cat={categoria}, onde a categoria escolhida é passada como parmetro em cat, e, dessa forma, o usuário verá apenas os artigos da categoria escolhida.

~~~php
  • Futebol
  • NBA
  • eSports
  • Vlei
    • ~~~

    API

    A API – Interface de Programao de Aplicaes – escolhida para o projeto foi a https://v2.api-football.com, exclusivamente utilizada para a coleta de dados atualizados do campeonato brasileiro de futebol.

    O arquivo de conexo à API está em /tables/api.php

    ~~~php "https://v2.api-football.com/leagueTable/$code", CURLOPT_RETURNTRANSFER => true, CURLOPT_FOLLOWLOCATION => true, CURLOPT_ENCODING => "", CURLOPT_MAXREDIRS => 10, CURLOPT_TIMEOUT => 30, CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1, CURLOPT_CUSTOMREQUEST => "GET", CURLOPT_HTTPHEADER => [ "x-rapidapi-host: v2.api-football.com", "x-rapidapi-key: 9e34581cb10ffc42a0527ed497342f96" ], ]); $response = curl_exec($curl); $err = curl_error($curl); curl_close($curl); if ($err) { echo "cURL Error #:" . $err; } else { $content_php = json_decode($response); $table_values = $content_php->api->standings[0]; } ~~~

    Os dados retirados da API so inseridos em um array, para que o tratamento das informaes possa ser feito de maneira mais eficiente, e depois so jogados em uma tabela gerada por tags HTML, que pode ser vista em http://localhost/SportNews/tables/?serie=a ou http://localhost/SportNews/tables/?serie=b, isso ocorre no arquivo /tables/index.php.

    ~~~php