Hello my friend i am working on captcha validation but i can not get example page when i created
this is my .htaccess code
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
and this is my example.php file which is in views folder
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('.refreshCaptcha').on('click', function () {
$.get('<?php echo base_url().'captcha / refresh'; ?>', function (data) {
$('#captImg').html(data);
});
});
});
</script>
</head>
<body>
<h4>Submit Captcha Code</h4>
<p id="captImg">
<?php echo $captchaImg; ?>
</p>
<p>Can't read the image? click
here to refresh.</p>
<form method="post">
Enter the code :
<input type="text" name="captcha" value="" />
<input type="submit" name="submit" value="SUBMIT" />
</form>
</body>
</html>
but when i wire localhost/capcode/example, it shows foo:bar how can i fix this?
Related
const express = require('express');
const path = require('path');
const app = express();
// Use static folder middleware
app.use(express.static(path.join(__dirname , "public")));
// Get
app.get("/" , (req , res)=>{
res.sendFile(`${__dirname}/index.html`);
});
// Listen
app.listen(3000 , ()=>{
console.log('server running on port 3000');
});
Folder structure
Root
-index.html
-app.js
public
-css
-index.css
-images
-image.png
In the index.html page The index.css file and the image.png are linked.
However, Those two are not being server as static files in app.js. But I have included the middle for serving static folders.
can some one explain what is the issue
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap
contributors">
<meta name="generator" content="Hugo 0.82.0">
<title>Sign up</title>
<link rel="canonical"
href="https://getbootstrap.com/docs/5.0/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-
beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-
touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png"
sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png"
sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-
tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="./public/css/index.css" rel="stylesheet">
</head>
<body class="text-center">
<main class="form-signin">
<form action="/" , method="POST">
<img class="mb-4" src="./public/images/image.png" alt="" width="72"
height="57">
<h1 class="h3 mb-3 fw-normal">Sign Up</h1>
<div class="form-floating">
<input type="text" name="fname" class="form-control top"
id="firstName" placeholder="first name">
<label for="firstName">First Name</label>
</div>
<div class="form-floating">
<input type="text" name="lname" class="form-control middle" id="lastName" placeholder="last name">
<label for="firstName">Last name</label>
</div>
<div class="form-floating">
<input type="email" name="email" class="form-control bottom" id="email" placeholder="inkey#email.com">
<label for="email">Email ID</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2020–2021</p>
</form>
</main>
</body>
</html>
This is the html page taken from bootstrap
The css file under the comment custom styles for this template
and the png is below the form tag.
The files are added correct as when the html page is seen in the browser independently then the image and css is showing up
However when it is served using node and express the image and css arent showing up
OK, So I am answering my own question here.
After refering to #jdmayfield 's answer and searching about MIME type errors I reached link to this link.
I realised that when you set the pubic folder as static in node, Then that public folder should not be added in the path to css or images in html
Meaning that
In the folder structure given above if we want to link css in html the code we use is
<link href="./public/css/index.css" rel="stylesheet">
And this gave me a MIME type error.
So I changed the above code to
<link href="css/index.css" rel="stylesheet">
This worked.
However if You independently open the HTML file by going live in vscode, the css and images wont load. But when served with node they will be served.
UPDATED POST:
In light of the recent comment by #Nav giving the error regarding mime-type, here is a snippet I found at Express: Setting content-type based on path/file?
"The Express documentation shows that it can do this if you pass in the
file name."
var filePath = 'path/to/image.png';
res.contentType(path.basename(filePath));
// Content-Type is now "image/png"
Try this example first. If that does not work, reload and check Dev console for different errors. It is possible there is more than one cause of your issue.
ORIGINAL POST:
Based on the code you have submitted, I think your problem is the default CORS policy. You need to incorporate a method of allowing Cross-Origin Resource Sharing between the domains, ports, and protocols you are using. I found a good document detailing CORS explicitly, but succinctly, with a solution that appears specifically suited to your needs. You might open the Dev console in your browser and look for similar error messages as outlined in the document to confirm.
Here's the link:
https://flaviocopes.com/express-cors/
I am using Python 3. I have created the necessary folders. i.e. static and templates folder. Still, this code is not working. I get the following error werkzeug.exceptions.BadRequestKeyError
abc.py
from flask import Flask, request, render_template, redirect
app=Flask(__name__)
#app.route('/project/', methods=['GET', 'POST'])
def tryy():
name=request.method
name1=request.form["uname"]
return render_template("project1.html",name=name1)
if __name__=="__main__":
app.run(debug=True)
project.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="" method="GET">
<input type="text" name="uname" />
<input type="submit" value="Signup" />
</form>
</body>
</html>
project1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css"
href="{{url_for('static', filename='style.css')}}" />
</head>
<body>
<h1>Hey there {{name}}. Nice to meet you</h1>
</body>
</html>
Your form action is set to ""
change it to this:
<form action="/project/" method="GET">
.htaccess
# Remove .php extension
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.*?)/?$ $1.php [L]
# Return 404 if original request is .php
RewriteCond %{THE_REQUEST} "^[^ ]* .*?\.php[? ].*$"
RewriteRule .* - [L,R=404]
This works fine, but how to modify the code so that a language switch based on this code works?
Currently it does the following:
localhost/index = OK
localhost/index.php = OK (404 error)
but when you press the button
EN
it will change the address as follows
localhost/index => localhost/index.php?la=en = FAIL (404 page)
which throws 404 error as well. Is it possible to prevent it? Would it just prevent the .php from being added before the query string? I want the language switch to work as well, is it possible? Any ideas?
Language switch:
<?php
session_start();
if($_GET['la']){
$_SESSION['la'] = $_GET['la'];
header('Location:'.$_SERVER['PHP_SELF']);
exit();
}
switch($_SESSION['la']){
case "eng":
require('lang/eng.php');
break;
case "fre":
require('lang/fre.php');
break;
case "ger":
require('lang/ger.php');
break;
default:
require('lang/eng.php');
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo $lang['index-title'];?></title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="langSelect">
<img src="flags/eng.png" alt="<?=$lang['lang-eng'];?>" title="<?=$lang['lang-eng'];?>" />
<img src="flags/fra.png" alt="<?=$lang['lang-fre'];?>" title="<?=$lang['lang-fre'];?>" />
<img src="flags/ger.png" alt="<?=$lang['lang-ger'];?>" title="<?=$lang['lang-ger'];?>" />
</div>
<div id="cont">
<p><?=$lang['index-welcome'];?></p>
<p><?=$lang['index-text-1'];?></p>
</div>
</div>
</body>
</html>
SOLVED!
Replace:
header('Location:'.$_SERVER['PHP_SELF']);
With:
header('Location:'. str_replace(".php", "", $_SERVER['PHP_SELF']));
The problem is at : header('Location:'.$_SERVER['PHP_SELF']);
The $_SERVER["PHP_SELF"] is a super global variable that returns the
filename of the currently executing script.
Change it to:
header('Location:'. str_replace(".php", "", $_SERVER['PHP_SELF']));
which remove the extension from the string.
Hope it helps.
So we have a php page www.example.com with a button which redirects to www.subdomain.example.com
We are facing following issues with sub domain and htaccess:
When we use button the
media queries and favicons do not work
When we user button where the sub domain code is, the URL masking doesn't work (but media queries and favicons work perfectly)
We have HTACCESS configured such that .php is hidden in URL and www.example.com/folder/index2 is masked by www.subdomain.example.com
Throughout the sub domain title also doesn't work
We have following setup in GoDaddy:
subdomain -> www.subdomain
www.subdomain -> www.example.com/folder/index2
example.com -> www.example.com
The sub domain code is in example.com/folder/
We are trying to understand how the mapping works as code is working perfectly fine without sub domain but messes up when we redirect the URL.
Main index file
<html>
<head>
<?php
$dir = "favicons/";
$files = array();
if ($handle = opendir($dir))
{
while (false !== ($file = readdir($handle)))
{
$files[] = $file;
}
}
$icon = $files[rand(2,count($files)-1)];
echo '<LINK REL="shortcut icon" HREF="favicons/'.$icon.'">';
?>
<meta charset="utf-8">
<title>Title</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="assets/css/main2.css" rel="stylesheet">
</head>
<body>
<div class="center">
<img href=""src="images/bg.jpg">
<br>
<br>
<button class="bt">button</button>
</div>
<script src="assets/js/jquery.min.js">
</script>
<script src="assets/js/jquery.poptrox.min.js">
</script>
<script src="assets/js/skel.min.js">
</script>
<script src="assets/js/main.js">
</script>
</body>
</html>
Index2 file which is in the folder pointed by subdomain
<!DOCTYPE html>
<html>
<head>
<?php
$dir = "../favicons/";
$files = array();
if ($handle = opendir($dir))
{
while (false !== ($file = readdir($handle)))
{
$files[] = $file;
}
}
$icon = $files[rand(2,count($files)-1)];
echo '<LINK REL="shortcut icon" HREF="../favicons/'.$icon.'">';
?>
<meta charset="utf-8">
<title>Title</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="../assets/css/main1.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<h1>random text</h1>
<br>
<script src="assets/js/jquery.min.js">
</script>
<script src="../assets/js/jquery.poptrox.min.js">
</script>
<script src="../assets/js/skel.min.js">
</script>
<script src="../assets/js/main.js">
</script>
</body>
</html>
HTACCESS file
# Turn mod_rewrite on
RewriteEngine On
RewriteBase /
# To externally redirect /dir/foo.php to /dir/foo/
RewriteCond %{THE_REQUEST} ^[A-Z]{3,}\s([^.]+)\.php [NC]
RewriteRule ^ %1 [R,L,NC]
## To internally redirect /dir/foo/ to /dir/foo.php
RewriteCond %{REQUEST_FILENAME}.php -f [NC]
RewriteRule ^ %{REQUEST_URI}.php [L]
ErrorDocument 400 www.example.com/Error-404
ErrorDocument 401 www.example.com/Error-404
ErrorDocument 403 www.example.com/Error-404
ErrorDocument 404 www.example.com/Error-404
ErrorDocument 500 www.example.com/Error-404
I left on Friday with my application working in dev mode....I came in this morning and the Layout.Mobile.chtml was NOT being used.....THIS IS DEV MODE so I still starting the web server each time.... I read about a similar issue related to the cache....but I don't see how this could be related to my problem as once the web server shuts down the cache is cleared.
I am using Visual Studio 2012 as my development "web server".
Everything was running and I don't see where the problem is nor do I understand where to look next. Any suggestions of how to diagnosis this problem or where to look would be appreciated.
This is ONLY for the Layout.Mobile.cshtml....when I switch back to the Layout.cshtml it is being called fine....
In my global.asax.cs I have the following set to force firefox to display using the mobile layout:
//The following forces Firefox to use the Mobile View ONLY
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("mobile")
{
ContextCondition = (context =>
context.Request.UserAgent.IndexOf("Mozilla", StringComparison.OrdinalIgnoreCase) >= 0)
});
My _ViewStart.cshtml file is:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
My _Layout.Cshtml is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Etracs</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
#RenderSection("scripts", required: false)
</head>
<body>
<header>
*#
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
#Html.Partial("_ViewSwitcher")
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - Turning Basin Services</p>
</div>
</div>
</footer>
</body>
</html>
My _Layout.Mobile.cshtml is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
#* #Styles.Render("~/Content/Mobile/css") *#
#* #Styles.Render("~/Content/jquerymobile/css") *#
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
#* #Scripts.Render("~/bundles/jquery") *#
#* #Scripts.Render("~/bundles/jquerymobile") *#
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
#RenderSection("scripts", required: false)
</head>
<body>
<div data-role="page" data-theme="c">
<div data-role="header">
#RenderSection("backbtn", false)
<h1>#ViewBag.Title</h1>
#RenderSection("Home", false)
</div>
<div data-role="content">
#* #RenderSection("featured", false) *#
#RenderBody()
</div>
<div data-role="footer">
<h4> #Html.Partial("_ViewSwitcher") © #DateTime.Now.Year - Turning Basin Services</h4>
</div>
</div>
</body>
</html>
In my views I am usually setting up the view to impliclity map to the Layout using viewstart.... however, my .Login.Mobile.cshtml hardwires the assocaiation to the mobile layout as follows:
#model TBS.Etracs.Web.Main.Models.LoginModel
#{
ViewBag.Title = "Log in";
Layout = "~/Views/Shared/_Layout.Mobile.cshtml";
}
#Html.ValidationSummary(true)
<section id="loginForm">
#* #using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) { *#
#using (Html.BeginForm ("Login")) {
#Html.AntiForgeryToken()
<div data-role="content">
<div data-role="fieldcontain">
<label for="UserName">UserName:</label>
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
</div>
<div data-role="fieldcontain">
<label for="Password">Password</label>
#Html.PasswordFor(m => m.Password)
#Html.ValidationMessageFor(m => m.Password)
</div>
<div data-role="fieldcontain">
<label for="ProgramMode">ProgramMode</label>
<select name="ProgramMode" id="ProgramMode">
<option value="VW">VW</option>
<option value="Porsche">Porsche</option>
<option value="Bentley">Bentley</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="ConnectionMode">ConnectionMode</label>
<select name="ConnectionMode" id="ConnectionMode">
<option value="Production">Production</option>
<option value="Test">Test</option>
</select>
</div>
<input type="submit" value="Log in" />
</div>
}
</section>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
I see you acknowledged you didn't believe this was related to the cache - but I'm adding this here since it's critical to be aware of when using mobile views.
The caching bug is explained here
Dave Ward:
Something everyone should be aware of when using MVC 4's mobile view
support is that there's a bug in the RTM version that results in the
wrong view being rendered for mobile devices after the view falls out
of the resolution cache the first time. The tricky part is that you
won't notice this in debug mode or until 15 minutes of inactivity in
release mode, so it's incredibly easy to let the buggy behavior slip
into production. There's an easy fix on NuGet, which Rick Anderson
covers here:
http://blogs.msdn.com/b/rickandy/archive/2012/09/17/asp-net-mvc-4-mobile-caching-bug-fixed.aspx
See also comments in this post
http://www.hanselman.com/blog/MakingASwitchableDesktopAndMobileSiteWithASPNETMVC4AndJQueryMobile.aspx
If you have a custom view engine (like i do) you can just change the base class after installing the nuget package:
public class SiteIdentityViewEngine : Microsoft.Web.Mvc.FixedRazorViewEngine, IVirtualPathFactory
Using Glimpse I found that that the _layout.mobile.cshtml was still being called and included....the problem was that it was not working....which relates to a problem I had earlier.....
In my _Layout.Mobile.chtml I went back to the following code and my layout is now working
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
I used this to replace the following lines in my _layout.Mobile.cshtml
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
The big question that I am VERY confused about is what happened .... this prevous worked for several days and then quit working..... Input would be appreciated.