Last active
April 7, 2022 06:49
-
-
Save igoralves1/58349bb6b69844c12c3c977f87c4d101 to your computer and use it in GitHub Desktop.
Perl example using a form with Bootstrap + jQuery + AJAX.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <VirtualHost *:80> | |
| ServerAdmin webmaster@localhost | |
| DocumentRoot /var/www | |
| ScriptAlias /cgi-bin/ /var/cgi-bin/ | |
| <Directory "/var/cgi-bin"> | |
| AllowOverride None | |
| Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch | |
| Require all granted | |
| </Directory> | |
| ErrorLog ${APACHE_LOG_DIR}/error.log | |
| CustomLog ${APACHE_LOG_DIR}/access.log combined | |
| </VirtualHost> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/usr/bin/perl | |
| use strict; | |
| use warnings; | |
| print <<EOF; | |
| Content-type: text/html | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Bootstrap Example</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>Example FORM Using PERL + Bootstrap + jQuery + AJAX </h2> | |
| <form action="myScript.pl"> | |
| <div class="form-group"> | |
| <label for="email">Email:</label> | |
| <input type="email" class="form-control" id="email" placeholder="Enter email" name="email"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="pwd">Password:</label> | |
| <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd"> | |
| </div> | |
| <div class="form-group"> | |
| <div id="respAjax" class=""></div> | |
| </div> | |
| <button id="submitNoAJAX" class="btn_submit btn btn-default">Submit without AJAX</button> | |
| <button id="submitAJAX" class="btn_submit btn btn-default">Submit with AJAX</button> | |
| </form> | |
| </div> | |
| <script> | |
| \$(document).ready(function() { | |
| \$('.btn_submit').on( 'click', function(e) { | |
| var objectEvent=\$(this); | |
| if(objectEvent.attr('id')==='submitNoAJAX'){ | |
| console.log("submitNoAJAX"); | |
| \$('form').attr('action','myScript.pl'); | |
| return true; | |
| } | |
| e.preventDefault(); | |
| if(objectEvent.attr('id')==='submitAJAX'){ | |
| console.log("ajax"); | |
| var dt={ | |
| email: \$("#email").val(), | |
| pwd: \$("#pwd").val() | |
| }; | |
| console.log(dt.email); | |
| var request =\$.ajax({ | |
| url: "myScriptAjax.pl", | |
| type: "POST", | |
| data: dt, | |
| dataType: "json" | |
| }); | |
| request.done(function(dataset){ | |
| console.log("success"); | |
| console.log(dataset); | |
| console.log(dataset.emailPERL); | |
| console.log(dataset.pwdPERL); | |
| \$('#respAjax').addClass("well"); | |
| \$('#respAjax').html("This came from AJAX "+dataset.emailPERL+", pswd="+dataset.pwdPERL); | |
| }); | |
| request.fail(function(jqXHR, textStatus) { | |
| alert("Request failed: " + textStatus); | |
| }); | |
| } | |
| //return true; | |
| }); | |
| }) | |
| </script> | |
| </body> | |
| </html> | |
| EOF |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/usr/bin/perl | |
| use strict; | |
| use warnings; | |
| use CGI::Carp; # send errors to the browser, not to the logfile | |
| use CGI; | |
| my $cgi = CGI->new(); # create new CGI object | |
| my $email = $cgi->param('email'); | |
| my $pwd = $cgi->param('pwd'); | |
| print $cgi->header('text/html'); | |
| print "Hello, $email, your password is $pwd"; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/usr/bin/perl | |
| use strict; | |
| use warnings; | |
| use JSON; #if not already installed, just run "cpan JSON" | |
| use CGI; | |
| my $cgi = CGI->new; | |
| print $cgi->header('application/json;charset=UTF-8'); | |
| my $id = $cgi->param('email'); | |
| my $pwd = $cgi->param('pwd'); | |
| #convert data to JSON | |
| my $op = JSON -> new -> utf8 -> pretty(1); | |
| my $json = $op -> encode({ | |
| emailPERL => $id, | |
| pwdPERL => $pwd, | |
| }); | |
| print $json; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 1 - From a Fresh Ubuntu 16.04 | |
| 2 - Install apache | |
| sudo apt-get update | |
| sudo apt-get install apache2 | |
| 3 - Create flder in /var/cgi-bin | |
| 4 - Apache reload | |
| service apache2 reload | |
| perlmaven.com/perl-cgi-script-with-apache2 | |
| 5 - Instal cpan | |
| $ cpan JSON | |
| 6 - https://www.youtube.com/watch?v=fXAKRaq-6gw&feature=youtu.be |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment