Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

SDFK

Colocar dados obtidos apartir de um formulário HTML num ficheiro JSON(Tutorial)

Recommended Posts

SDFK

Boa tarde comunidade! :)

Sou novo neste fórum, descobri-o hoje á tarde e rapidamente criei uma conta, feliz por ter a oportunidade de partilhar os meus conhecimentos e aprender algo!

E para me iniciar aqui, decidi escrever um artigo para ajudar todos os Web Developers a criarem algo fantástico.

Hoje vou mostrar como colocar os dados obtidos a partir de um formulário em HTML, num ficheiro JSON, utilizando PHP.

Mas primeiramente vamos a umas explicações!

O que é JSON?

Primeiramente, JSON é a sigla correspondente a JavaScript Object Notation. È usado na maioria das vezes para criar API's ou guardar informações, que depois podem ser descodificadas e usadas para mostrar informações.

Pode ser usada como um substituto ao MySQL(Em alguns casos, como por exemplo, guardar informações), pois é relativamente fácil de ser programada.

E é a tecnologia que vamos usar hoje para guardar as informações do formulário HTML.

Antes do código:

Antes de começarmos a programar é importante criarmos a nossa estrutura de ficheiros, que se vai dividir nos ficheiros: index.php(ficheiro do formulário HTML), tanks.php(Página de agradecimento) e data.json(Onde vão ser guardados as informações em JSON).

Vamos ao código?

Chegando á parte esperada, vamos começar a programar o nosso código HTML e PHP:

<?php

if(isset($_POST['submit'])) {

  $file = "data.json";

  $json_string = json_encode($_POST, JSON_PRETTY_PRINT);

  file_put_contents($file, $json_string, FILE_APPEND);

  header('Location: thanks.php');

}

?>

<!doctype html>

<html>

<head>

</head>

<body>

<center>

<h1>Form</h1>

<form name="form1" method="post" action="">

<p>

<label for="name">Name: </label>

<input type="text" name="name" id="name" placeholder="Your full name" autofocus required>

</p>

<p>

<label for="email">Email: </label>

<input type="email" name="email" id="email">

</p>

<p>

<label for="cell">Cell: </label>

<input type="tel" name="cell" id="cell">

</p>

<p>

<label for="dob">Date of birth: </label>

<input type="date" name="dob" id="dob">

</p>

<p>

<label for="study">Years of art study: </label>

0 <input type="range" name="study" id="study" min="0" max="16"> 16

</p>

<p style="text-align: center;">

<input type="submit" name="submit" id="submit" value="Submit">

</p>

</form>

</center>

</body>

</html>

Mais brevemente vou lançar um artigo sobre como cada parte deste código funciona, esperem por mim :)

Obrigado!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.