erondem
Posts: 23
Joined: Wed Jul 11, 2018 12:19 pm

Getting data from html from and writing to a .txt file

Wed Aug 01, 2018 12:27 pm

Hi, I have a html form and it form is loaded with initial values of config.txt in the raspberry. Till now everything is okey. But when I want to change the content of config.txt using the html form in the local server config.txt gets empty.

I am using this library: https://github.com/yhirose/cpp-httplib


This is html file

Code: Select all

<!DOCTYPE html>

<html lang="en">

<head>

    

        <script type="text/javascript" src="jquery.min.js"></script>

        <script type="text/javascript" src="vue.js"></script>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>PassGate Configuration</title>



</head>

<body>

    <div class="container" id="pass-app"> 

        <form class="form" id="myform"  method="post">

            
            

            <h4 class="text-center">Configuration</h4>

            <h3>Ethernet Configuration</h3>

            <fieldset>

                <span for="dhcp">DHCP</span>

                <input type="checkbox" name="switch" id="switch" v-model="json.dns"/>

            </fieldset>

            <fieldset>

                <span>IP</span>

                <input id="ip" type="text" v-model="json.ip" required>

            </fieldset>

            <fieldset>

                <span>DNS</span>

                <input id="dns" type="text" v-model="json.dns">

            </fieldset>

            <fieldset>

                <span>GateWay</span>

                <input id="gate" type="text" v-model="json.gate">

            </fieldset>

            <fieldset>

                <span>Subnet</span>

                <input id="sub" type="text" v-model="json.sub">

            </fieldset>



            <h3>Server </h3>

            <fieldset>

                <span>Server</span>

                <input id="sv" type="text" v-model="json.sv">

            </fieldset>

            <fieldset>

                <span>Port</span>

                <input id="port" type="text" v-model="json.port">

            </fieldset>

            <fieldset>

                <span>Path</span>

                <input id="svurl" type="text" v-model="json.svurl">

            </fieldset>

            <h3>Update Server</h3>

            <fieldset>

                <span>Port</span>

                <input id="svUp" type="text" v-model="json.svUp">

            </fieldset>

            <fieldset>

                <span>Path</span>

                <input id="scurlUp" type="text" v-model="json.svurlUp">

            </fieldset>

            <h3>SIM</h3>

            <fieldset>

                <span>SIM</span>

                <input id="sim" type="text" v-model="json.sim">

            </fieldset>

            

            <fieldset>

                <button name="submit" onclick="submitform()" type="submit" class="form-submit" data-submit="...Sending">Save</button>

            </fieldset>

            

        </form>

        <div class="text-center m-t-10">

            <a class="reset-button" href="/reset"> Reset</a>

        </div>

    </div>

    <script type="text/javascript">



        var jsonURL = '/saved';



        new Vue({



            el: '#pass-app',



            data: {

                json: { }

            },

            created: function () {

                fetch(jsonURL)

                .then(r => r.json())

                .then(json => {

                    this.json=json;

                });

            }

        });



        

        function submitform() {

            console.log("click");

            //var url = '/update?UpdateData';

            var url = '/update';











            $('.form').attr('action', url);

            var data = JSON.stringify({

                "ip": $('#ip').val(),

                "dns": $('#dns').val(),

                "gate": $('#gate').val(),

                "sub": $('#sub').val(),

                "sv": $('#sv').val(),

                "port": $('#port').val(),

                "svurl": $('#svurl').val(),

                "svUp": $('#svUp').val(),

                "portUp": $('#portUp').val(),

                "svurlUp": $('#svurlUp').val(),

                "sim": $('#sim').val()

            });



			console.log(data);

            $("#myform").submit();

        }



    </script>

    <style type="text/css">

        @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic); * { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; }

        .text-center{text-align: center;}

        body { font-family: "Roboto", Helvetica, Arial, sans-serif; font-weight: 100; font-size: 12px; line-height: 30px; color: #777; background: #6a3ca8; }

        .container { max-width: 400px; width: 100%; margin: 0 auto; position: relative; }



        .m-t-10{margin-top: 10px;}

        .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="url"], .form textarea, .form button[type="submit"] { font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif; }

        .form { background: #F9F9F9; padding: 25px; margin: 10px 0; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); } 

        .notification-box{ background: #F9F9F9; padding: 25px; margin: 150px 0; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); } 

        .notification-box p{font-weight: 600; line-height: 18px;}

        .form h3 { display: inline-block; border-bottom: 1px solid #000; font-size: 20px; font-weight: 300; margin-bottom: 10px; }

        .form h4 { margin: 5px 0 15px; display: block; font-size: 16px; font-weight: 400; }

        fieldset { border: medium none !important; margin: 0 0 10px; min-width: 100%; padding: 0; width: 100%; }

        .form span {float:left; width: 25%; line-height: 40px;}

        .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="url"], .form textarea { width: 75%; border: 1px solid #ccc; background: #FFF; margin: 0 0 5px; padding: 10px; }

        .form input[type="text"]:hover, .form input[type="email"]:hover, .form input[type="tel"]:hover, .form input[type="url"]:hover, .form textarea:hover { -webkit-transition: border-color 0.3s ease-in-out; -moz-transition: border-color 0.3s ease-in-out; transition: border-color 0.3s ease-in-out; border: 1px solid #aaa; }

        .form textarea { height: 100px; max-width: 100%; resize: none; }

        .form button[type="submit"] { cursor: pointer; width: 100%; border: none; background: #6a3ca8; color: #FFF; margin: 0 0 5px; padding: 10px; font-size: 15px; }

        .form button[type="submit"]:hover { background: #3d1670; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; }

        .form button[type="submit"]:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }

        .form input:focus, .form textarea:focus { outline: 0; border: 1px solid #aaa; }

        ::-webkit-input-placeholder { color: #888; }

        :-moz-placeholder { color: #888; }

        ::-moz-placeholder { color: #888; }

        :-ms-input-placeholder { color: #888; }

        /*.jsless-switchery input { display: none; } .jsless-switchery label { background-color: #fff; border: 1px solid #dfdfdf; border-radius: 20px; cursor: pointer; display: inline-block; height: 30px; position: relative; vertical-align: middle; width: 50px; user-select: none; box-sizing: content-box; background-clip: content-box; border-color: #dfdfdf; box-shadow: #dfdfdf 0px 0px 0px 0px inset; transition: border 0.4s, box-shadow 0.4s; background-color: #ffffff; } .jsless-switchery label:after { content: ""; background: #fff; border-radius: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); height: 30px; position: absolute; top: 0; width: 30px; left: 0px; transition: background-color 0.4s, left 0.2s; } .jsless-switchery input:checked ~ label { border-color: #6a3ca8; box-shadow: #6a3ca8 0px 0px 0px 16px inset; transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; background-color: #6a3ca8; } .jsless-switchery input:checked ~ label:after { left: 20px; transition: background-color 0.4s, left 0.2s; background-color: #ffffff; } .jsless-switchery { width: 60px; float: left; }*/



        .reset-button{padding: 10px; text-align: center; color: #6a3ca8; background: #fff; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); font-size: 22px; text-decoration: none; margin-bottom:15px; display: inline-block;} .reset-button:hover{background: #f5f5f5}

    </style>

</body>

</html>


This is the part of code I'm using to post initial data to form from config.txt and gets the data from from to config.txt. As I said, I am going to use it to change the credientals.

The line where I print out "BEFORE BODY" looks empty. So I never get the data from form. I am trying to go the adress where I wrote inside of svr.listen() function.


Code: Select all

void *threadHttp(void *threadid)

{

	while(isLoggerBusy){

		sleepcp(13);

	}

	putLog("HTTPService",2,"Service Started");
	cout << 1 << endl;

	

  	using namespace httplib;





    Server svr;




    svr.Get("/", [](const Request& req, Response& res) {


		



        res.set_content(readFile("index.html"), "text/html");


		while(isLoggerBusy){

			sleepcp(13);

		}

		putLog("HTTPService",2,"Incoming Request to server/");

    });


	

	 svr.Get("/jquery.min.js", [](const Request& req, Response& res) {

        res.set_content(readFile("jquery.min.js"), "text/javascript");

    });

	

	 svr.Get("/vue.js", [](const Request& req, Response& res) {

        res.set_content(readFile("vue.js"), "text/javascript");

		

    });

	

	svr.Post("/update", [&](const auto& req, auto& res) {

		auto size = req.files.size();

		auto ret = req.has_file("update");

		const auto& file = req.get_file_value("update");

		// file.filename;

		// file.content_type;

		

		/*cout << "req" << endl;

		cout << req << endl;*/

		

		cout << "BEFORE BODY" << endl;

		cout << ret << endl;

		

		auto body = req.body.substr(file.offset, file.length);

		

		

		cout << "INSIDE OF THE BODY" << endl;

		cout << body << endl;

		delay(1000);

		

		putConfigs(body);

		

		res.set_content("ok", "text/plain");

	});

	

	svr.Get("/saved", [](const auto& req, auto& res) {		

        res.set_content(readFile("configs.txt"), "text/plain");

	});

	cout << "2" << endl;

	

	/*svr.Post("update/", [](const Request& req, Response& res) {

        		auto numbers1 = req.matches[1];

		cout << "incoming request" << endl;

		cout << numbers1 << endl;

		res.set_content(req.body(), "text/plain");

		

    });*/



		

	svr.listen("192.168.0.150", 8080);	
		

   

   while(isLoggerBusy){

		sleepcp(13);

	}

	putLog("HTTPService",0,"Service Exit...");

   	pthread_exit(NULL);

}

void putConfigs(string data){

	  ofstream myfile ("configs.txt");

		if (myfile.is_open())

	  {

		myfile << data;

		myfile.close();

	  }

	  else cout << "Unable to open file";

}


string readFile (char* fileLocation) {

	string fileAll;

	string line;

	ifstream myfile (fileLocation);

	if (myfile.is_open())

	{

		while ( getline (myfile,line) )

		{

			fileAll += line;

		}

		myfile.close();

	}

	return fileAll;

}


erondem
Posts: 23
Joined: Wed Jul 11, 2018 12:19 pm

Re: Getting data from html from and writing to a .txt file

Wed Aug 01, 2018 1:10 pm

In short this is a question of how to get some credientals from a web form and how to write it to a .txt file. I think second part is okey but first part where I stucked

Return to “Advanced users”