Hi, So I am extremely extremely new to any web development, so please take it easy on me
I have setup framework7 with a wamps server, as form the tutorial link on this website.
I have a mysql database inside that wamps icon, which I have used, and set up a very basic database (going to fill the rest later date once i can get it working, but its just a list of councils atm)
I want to do 2 things, the first was my main page has a search bar at the top, and I want to generate the options below such that user can search and get the council they want quickly from the 400+ or so in the UK. I am thus wanting to populate the dropdown option from my sql database row by row.
I have followed this tutorial using PDO (https://www.youtube.com/watch?v=5ZRUN4ZUcT8) but doesnt work and im not skilled enough to resort, I have managed to connect however using sqli on a test.php file, this returns me a big list, but I cannot get it to link to my main website, because it seems to just throw a 404, which isn’t helpful and ive tried eveyrthign I can find but have little understanding so…
My SQL Database is currently hosted at localhost:port 3308 and my localhost that has my main PWA on, is port 8082
The second thing I want to do, is that once they have selected council, Ill have a button appear, which I should be fine to do, taking you to a new page, which retrieves further information form database, each council will has say Westminster, Y,Y,N,N,Y etc after it, correspinding to does it ahve a black bin for first location, blue for second, no green bin for 3rd etc… That sort of idea,
Then this data will determine which cards will be visible to the user.
But, I am having issue getting anything to come into my browser. If I go to http://localhost/EcoPal/test.php I can see the data it got from my PHP.
But I can’t get it into my website. I have no idea if it is to do with file structure? Ive kept it the same as the structure that came with framework7 vue. Ive no idea where to shove the test.php file
My PHP is:
<?php $ser="localhost"; $user="EcoPalUser"; $pass="TRWWSTW4e&e"; $db="authorities"; $con=mysqli_connect($ser,$user,$pass,$db,3308) or die("Connection Failed"); echo "Connected Sucess"; $received_data = json_decode(file_get_contents("php://input")); echo $received_data; $sql = 'SELECT * FROM `councils`;'; $result = mysqli_query($con,$sql); $resultCheck = mysqli_num_rows($result); if($resultCheck > 0){ echo "Result Found so now printing"; while($row = mysqli_fetch_assoc($result)){ echo $row['Name'],""; } } ?>
It Generates the following:
(Ignore the ddlesborough–will fix that eventually–its an issue with what I put in my mysql database)
Connected SucessResult Found so now printingddlesbrough
Hartlepool
Redcar and Cleveland
Stockton-on-Tees
Darlington
Halton
Warrington
Blackburn with Darwen
Blackpool
Kingston upon Hull, City of
East Riding of Yorkshire
North East Lincolnshire
North Lincolnshire
York…You get the idea, it goes on for several hundred items
My Main Homepage is:
<!-- Some function which will check to see if the user previously saved login on their device -->
<f7-navbar >
<f7-nav-title title="EcoPal" subtitle ="Your Recycling Companion">
</f7-nav-title>
<f7-nav-right sliding>
<f7-link href="/settings/">
<f7-icon ios="f7-compass_fill" aurora="f7-compass_fill" md="material:settings" size = "32px" ></f7-icon>
</f7-link>
</f7-nav-right>
</f7-navbar>
<f7-block>
<f7-list>
<f7-list-item title="Select Area" smart-select :smart-select-params="{openIn: 'popup', searchbar: true, searchbarPlaceholder: 'Search for your area'}">
<select name="Council" v-model="select_council" @change="fetchCouncil">
<option value="">Select Authority</option>
<option v-for="data in council_data" :value="data.council_id">{{data.council_name}}</option>
</select>
</f7-list-item>
</f7-list>
</f7-block>
My Router is:
import HomePage from ‘…/pages/home.vue’;
import AboutPage from ‘…/pages/about.vue’;
import LocalRecyclingInfo from ‘…/pages/localrecyclinginfo.vue’;
import FormPage from ‘…/pages/form.vue’;
import PrivacyPage from ‘…/pages/privacy-policy.vue’;
import DynamicRoutePage from ‘…/pages/dynamic-route.vue’;
import RequestAndLoad from ‘…/pages/request-and-load.vue’;
import NotFoundPage from ‘…/pages/404.vue’;
import PostCodeEntryPage from ‘…/pages/postcode-entry.vue’
import HomeOriginal from ‘…/pages/homeoriginal.vue’;
import SplashScreen from ‘…/pages/loading-page.vue’;
import LoginPage from ‘…/pages/login-page.vue’;
import Settings from ‘…/pages/settings.vue’;
import AboutCreators from ‘…/pages/about-creators.vue’;
var routes = [
{
path: '/',
component: HomePage,
},
{
path: '/login-page/',
component: LoginPage,
},
{
path: '/loading-page/',
component: SplashScreen,
},
{
path: ‘/about-creators/’,
component: AboutCreators,
},
{
path: '/settings/',
component: Settings,
},
{
path: '/about/',
component: AboutPage,
},
{
path: '/homeorignal/',
component: HomeOriginal,
},
{
path: '/localrecyclinginfo/',
component: LocalRecyclingInfo,
},
{
path: '/home/',
component: HomePage,
},
{
path: '/postcode-entry',
component: PostCodeEntryPage,
},
{
path: '/privacy-policy/',
component: PrivacyPage,
},
{
path: '/form/',
component: FormPage,
},
{
path: '/dynamic-route/blog/:blogId/post/:postId/',
component: DynamicRoutePage,
},
/*{
path: '/config/'
component: Config
},*/
{
path: '/request-and-load/user/:userId/',
async: function (routeTo, routeFrom, resolve, reject) {
// Router instance
var router = this;
// Popup Instance
var popup = app.popup.create({});
// App instance
var app = router.app;
// Show Preloader
app.preloader.hide();
// User ID from request
var userId = routeTo.params.userId;
// Simulate Ajax Request
setTimeout(function () {
// We got user data from request
var user = {
firstName: 'Samuel',
lastName: 'Rhodes',
about: 'Hello, I am the Creator of EcoPal! I hope you like it!',
links: [
{
title: 'EcoPal Website',
url: 'http://framework7.io',
},
{
title: 'EcoPal Blog',
url: 'http://forum.framework7.io',
},
]
};
// Hide Preloader
app.preloader.show();
// Resolve route to load page
resolve(
{
component: RequestAndLoad,
},
{
context: {
user: user,
}
}
);
}, 1000);
},
},
{
path: '(.*)',
component: NotFoundPage,
},
];
export default routes;
My App.js is
// Import Vue
import Vue from ‘vue’;
// Import Framework7
import Framework7 from ‘./framework7-custom.js’;
// Import Framework7-Vue Plugin
import Framework7Vue from ‘framework7-vue/framework7-vue.esm.bundle.js’;
// Import Framework7 Styles
import ‘…/css/framework7-custom.less’;
// Import Axios For Http request etcs
import Axios from ‘axios’;
// Import Icons and App Custom Styles
import ‘…/css/icons.css’;
import ‘…/css/app.less’;
// Import App Component
import App from ‘…/components/app.vue’;
// Init Framework7-Vue Plugin
Framework7.use(Framework7Vue);
// Init App
new Vue({
el: ‘#app’,
render: (h) => h(App),
// Register App Component
components: {
app: App
},
});
My index.html is
EcoPalThis is what I get in my browser
Help please is really appreciated as im completely stumped and spent best part of 2 weeks trying to resolve this!
