Tic Tac Toe app
here tic tac toe rules and players examples
This is game page here play game
My app URL :- https://ukifunwork3bydilani.herokuapp.com/index1.html
Tuesday, August 1, 2017
Uki student record app
Uki student record app
here using simple ReactJS
visit :- https://scotch.io/tutorials/routing-react-apps-the-complete-guide
SCHOOL FINDER
SCHOOL FINDER
My app
Here using languages are
- ReactJS
- NodeJS
- Express
- MongoDB
- Mongoose
part 01
https://www.codeproject.com/Articles/1067725/Part-Building-web-app-using-react-js-express-js
part 02
https://www.codeproject.com/Articles/1068287/Part-Building-web-app-using-react-js-express-js-no
Sunday, July 16, 2017
AJAX
AJAX
AJAX = Asynchronous JavaScript And XML.AJAX is not a programming language.
How AJAX Works
var xhttp = new XMLHttpRequest();
Send a Request To a Server
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
GET Requests
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
POST Requests
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
more information visit https://www.w3schools.com/xml/ajax_intro.asp
ReactJS
ReactJS
React is front end library developed by Facebook. It's used for handling view layer for the web and mobile apps.
React Features
1)JSX2)Components
3)Unidirectional data flow and Flux
4)License
Then this install
Install Global Packages
npm install -g babel
npm install -g babel-cli
Create Root Folder
npm install webpack --save
npm install webpack-dev-server --save
npm install react --save
npm install react-dom --save
npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015
Create files
touch index.html
touch App.jsx
touch main.js
touch webpack.config.js
More detail next blogg
Thank you
Mongoose
Mongoose
1) npm -v2) mongo --version
3)then create these folders
4) npm install --save-dev nodemon 5) npm install express --save6) Open the server.js file and type/copy the code below into it
var express = require('express'),
app = express(),
port = process.env.PORT || 3000;
app.listen(port);
console.log('todo list RESTful API server started on: ' + port);
7) npm run start
8) npm install mongoose --save
9) open the todoListModel.js file in your api/models folder and type the following code into the file and save.
8) npm install mongoose --save
9) open the todoListModel.js file in your api/models folder and type the following code into the file and save.
'use strict';
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var TaskSchema = new Schema({
name: {
type: String,
Required: 'Kindly enter the name of the task'
},
Created_date: {
type: Date,
default: Date.now
},
status: {
type: [{
type: String,
enum: ['pending', 'ongoing', 'completed']
}],
default: ['pending']
}
});
module.exports = mongoose.model('Tasks', TaskSchema);
10) Get Put Delete Update
'use strict';
var mongoose = require('mongoose'),
Task = mongoose.model('Tasks');
exports.list_all_tasks = function(req, res) {
Task.find({}, function(err, task) {
if (err)
res.send(err);
res.json(task);
});
};
exports.create_a_task = function(req, res) {
var new_task = new Task(req.body);
new_task.save(function(err, task) {
if (err)
res.send(err);
res.json(task);
});
};
exports.read_a_task = function(req, res) {
Task.findById(req.params.taskId, function(err, task) {
if (err)
res.send(err);
res.json(task);
});
};
exports.update_a_task = function(req, res) {
Task.findOneAndUpdate({_id: req.params.taskId}, req.body, {new: true}, function(err, task) {
if (err)
res.send(err);
res.json(task);
});
};
exports.delete_a_task = function(req, res) {
Task.remove({
_id: req.params.taskId
}, function(err, task) {
if (err)
res.send(err);
res.json({ message: 'Task successfully deleted' });
});
};
ExpressJs
ExpressJs
ExpressJS is a web application framework
➧ node --version
v5.0.0
➧ npm --version
3.5.2
How to use npm
Globally:
npm install -g <package-name>
Locally:
npm install <package-name>
after npm init
Then install this
➦ npm install --save express
➦ npm install -g nodemon
then create index.js
then type the following in it.
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send("Hello world!");
});
app.listen(3000);
then go to your terminal and type the following.
nodemon index.js
This will start the server. To test this app, open your browser and go to
http://localhost:3000 and you can see Hello world
➧ node --version
v5.0.0
➧ npm --version
3.5.2
How to use npm
Globally:
npm install -g <package-name>
Locally:
npm install <package-name>
after npm init
Then install this
➦ npm install --save express
➦ npm install -g nodemon
then create index.js
then type the following in it.
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send("Hello world!");
});
app.listen(3000);
then go to your terminal and type the following.
nodemon index.js
This will start the server. To test this app, open your browser and go to
http://localhost:3000 and you can see Hello world
Wednesday, June 21, 2017
API
API
(Application Programming Interface)
HTTP
↬ HyperText Transfer Protocol.
↬ Rules for getting something from one place to another.
REST
↬ Representational State Transfer.
↬ it must do the following:
(Application Programming Interface)
HTTP
↬ HyperText Transfer Protocol.
↬ Rules for getting something from one place to another.
REST
↬ Representational State Transfer.
↬ it must do the following:
- Separate the client from the server
- Not hold state between requests
- Use HTTP and HTTP methods
- GET: retrieves information from the specified source
- POST: sends new information to the specified source.
- PUT: updates existing information of the specified source.
- DELETE: removes existing information from the specified source.
Anatomy of a Request
1) request line
2)header
3)body
Authentication & API Keys
"APIs require authentication using a protocol called OAuth."
Eg:
var apiKey = "FtHwuH8w1RDjQpOr0y0gF3AWm8sRsRzncK3hHh9";
XML
(E xtensible Markup Language )
Sunday, June 11, 2017
SASS
SASS
↣ SASS:- Syntactically Awesome Stylesheet
↣ SASS:- Syntactically Awesome Stylesheet
Advantages of SASS
- It allows writing clean CSS in a programming construct.
- It helps in writing CSS quickly.
- It is a superset of CSS, which helps designers and developers work more efficiently and quickly.
- As Sass is compatible with all versions of CSS, we can use any available CSS libraries.
- It is possible to use nested syntax and useful functions such as color manipulation, mathematics and other values.
Disadvantages of SASS
- It takes time for a developer to learn new features present in this pre-processor.
- If many people are working on the same site, then should use the same preprocessor. Some people use Sass and some people use CSS to edit the files directly. Therefore, it becomes difficult to work on the site.
- There are chances of losing benefits of browser's built-in element inspector.
SASS Indented Syntax
SASS Indented syntax or just SASS is an alternative to CSS based SCSS syntax.- It uses indentation rather than { and } to delimit blocks.
- To separate statements, it uses newlines instead of semicolons(;).
- Property declaration and selectors must be placed on its own line and statements within { and } must be placed on new line and indented.
.myclass { color = red; font-size = 0.2em; }
Do you want more information visit http://www.tutorialspoint.com/sass/
Thank you
JSON
JSON
JSON is a lightweight data-interchange format.
JSON :- JavaScript Object Notation
var myObj =
{ "name":"John",
"age":31, "city":"New York" };
var myJSON =
'{ "name":"John",
"age":31, "city":"New York" }';
JSON Strings
{ "name":"Dilani" }
JSON Numbers
{ "age":19}
JSON Objects
{
"employee":{ "name":"Dilani", "age":19, "city":"Jaffna" }
}
Arrays
{
"employees":[ "Dilani", "Api", "Mino" ]
}
JSON Booleans
JSON null
JSON is a lightweight data-interchange format.
JSON :- JavaScript Object Notation
Sending Data
var myObj =
{ "name":"John",
"age":31, "city":"New York" };
var myJSON =
JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
Receiving Data
var myJSON =
'{ "name":"John",
"age":31, "city":"New York" }';
var myObj =
JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
JSON Syntax Rules
- Data is in name/value pairs
- Data is separated by commas
- Curly braces hold objects
- Square brackets hold arrays
JSON Strings
{ "name":"Dilani" }
JSON Numbers
{ "age":19}
JSON Objects
{
"employee":{ "name":"Dilani", "age":19, "city":"Jaffna" }
}
Arrays
{
"employees":[ "Dilani", "Api", "Mino" ]
}
JSON Booleans
{ "sale":true }
{ "middlename":null }
Data Types
- a string
- a number
- an object (JSON object)
- an array
- a boolean
- null
JSON values cannot be one of the following data types:
- a function
- a date
- undefined
Stringify
var myJSON = JSON.stringify(arr);
MongoDB & Node.js
MongoDB & Node.js
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/<dbname>";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
db.createCollection("<tablename>", function(err, res) {
if (err) throw err;
console.log("Table created!");
db.close();
});
});
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var myobj = [
{ name: 'Dilani', address: 'Karainagar'},
{ name: 'Inthu', address: 'Jaffna'} ];
db.collection("<tablename>").insert(myobj, function(err, res) {
⇰ Delete Record
⇰ Drop Collection
⇰ Creating a Database
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/<dbname>";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
console.log("Database created!");
db.close();
});
⇰ Creating a Table
var url = "mongodb://localhost:27017/<dbname>";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
db.createCollection("<tablename>", function(err, res) {
if (err) throw err;
console.log("Table created!");
db.close();
});
});
⇰ Insert Into Table
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/<dbname>";
var url = "mongodb://localhost:27017/<dbname>";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var myobj = [
{ name: 'Dilani', address: 'Karainagar'},
{ name: 'Inthu', address: 'Jaffna'} ];
db.collection("<tablename>").insert(myobj, function(err, res) {
if (err) throw err;
console.log("Number of records inserted: " + res.insertedCount);
db.close();
});
});
console.log("Number of records inserted: " + res.insertedCount);
db.close();
});
});
⇰ Select One
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/<dbname>";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
db.collection("<tablename>").find({}).toArray(function(err, result) {
if (err) throw err;
console.log(result);
db.close();
});
});
var url = "mongodb://localhost:27017/<dbname>";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
db.collection("<tablename>").find({}).toArray(function(err, result) {
if (err) throw err;
console.log(result);
db.close();
});
});
⇰ Filter the Result
var http = require('http');
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/<dbname>";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var query = { address: "Karanagar" }; db.collection("<tablename>").find(query).toArray(function(err, result) {
if (err) throw err;
console.log(result);
db.close();
});
});
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/<dbname>";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var query = { address: "Karanagar" }; db.collection("<tablename>").find(query).toArray(function(err, result) {
if (err) throw err;
console.log(result);
db.close();
});
});
⇰ Sort the Result
var http = require('http');
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/<dbname>";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var mysort = { name: 1 }; db.collection("<tablename>").find().sort(mysort).toArray(function(err, result) {
if (err) throw err;
console.log(result);
db.close();
});
});
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/<dbname>";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var mysort = { name: 1 }; db.collection("<tablename>").find().sort(mysort).toArray(function(err, result) {
if (err) throw err;
console.log(result);
db.close();
});
});
⇰ Delete Record
var http = require('http');
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/<dbname>";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var myquery = { address: 'Mountain 21' }; db.collection("<tablename>").remove(myquery, function(err, obj) {
if (err) throw err;
console.log(obj.result.n + " document(s) deleted");
db.close();
});
});
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/<dbname>";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var myquery = { address: 'Mountain 21' }; db.collection("<tablename>").remove(myquery, function(err, obj) {
if (err) throw err;
console.log(obj.result.n + " document(s) deleted");
db.close();
});
});
⇰ Drop Collection
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/mydb";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
db.collection("customers").drop(function(err, delOK) {
if (err) throw err;
if (delOK) console.log("Table deleted");
db.close();
});
});
⇰ Update Document
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://127.0.0.1:27017/mydb";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var myquery = { address: "Karanagar" };
var newvalues = { name: "Inthu", address: "Karanagar" };
db.collection("customers").update(myquery, newvalues, function(err, res) {
if (err) throw err;
console.log(res.result.nModified + " record updated");
db.close();
});
});
var url = "mongodb://127.0.0.1:27017/mydb";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var myquery = { address: "Karanagar" };
var newvalues = { name: "Inthu", address: "Karanagar" };
db.collection("customers").update(myquery, newvalues, function(err, res) {
if (err) throw err;
console.log(res.result.nModified + " record updated");
db.close();
});
});
Nodejs
Node Js
- Node.js is a very powerful JavaScript-based framework
- It is used to develop I/O intensive web applications like video streaming sites, single page applications, and other web applications.
- Node.js is an open source, cross-platform runtime environment for developing server side and networking applications.
- Node.js applications are written in JavaScript, and can be run within the Node.js runtime on OS X, Microsoft Windows, and Linux.
Concepts
⇉ console.log("Hello World!");O/P Hello World!
- The files you create with your editor are called source files and contain program source code. The source files for Node.js programs are typically named with the extension ".js".
- if you want dwd nodejs server visit this page
var http = require("http"); http.createServer(function (request, response) { // Send the HTTP header // HTTP Status: 200 : OK // Content Type: text/plain response.writeHead(200, {'Content-Type': 'text/plain'}); // Send the response body as "Hello World" response.end('Hello World\n'); }).listen(8081); // Console will print the message console.log('Server running at http://127.0.0.1:8081/');
Now execute the main.js to start the server as follows −
$ node main.js
Verify the Output. Server has started.
Server running at http://127.0.0.1:8081/
do you want more information visit http://www.tutorialspoint.com/nodejs/
Wednesday, June 7, 2017
28th class at 26.06.2017
Today is uki 28th class
Today discuss our in class exercise.
exercise1
1) use music
db
2) db.creteColletion("songdetails")
3) db.songdetails.insert(song_name:"thaniye thaniye", flim:"rhythm",music_derctor:"A.R.Rahuman", singer:"shankar mahadeven")
4) db.songdetails.find().pretty()
5) db.songdetails.find({music_director:"A.R.Rahman"},{song_name:1,_id:0})
6) db.songdetails.find({music_director:"A.R.Rahman",singar:"Unnikirishnan"},{song_name:1,_id:0})
7) db.songdetails.remove({songname:"roja poonthoddam"})
8) db.songdetails.insert(song_name:"Etho thechcha", flim:"Anjaan",music_derctor:"A.R.Rahuman", singer:"Aniruth")
9) db.songdetails.find({singar:"Harikaran", flim:"Minsara kannavu"},{song_name:1,_id:0})
10) db.songdetails.find({},{singar:1,_id:0})
Today discuss our in class exercise.
exercise1
1) use music
db
2) db.creteColletion("songdetails")
3) db.songdetails.insert(song_name:"thaniye thaniye", flim:"rhythm",music_derctor:"A.R.Rahuman", singer:"shankar mahadeven")
4) db.songdetails.find().pretty()
5) db.songdetails.find({music_director:"A.R.Rahman"},{song_name:1,_id:0})
6) db.songdetails.find({music_director:"A.R.Rahman",singar:"Unnikirishnan"},{song_name:1,_id:0})
7) db.songdetails.remove({songname:"roja poonthoddam"})
8) db.songdetails.insert(song_name:"Etho thechcha", flim:"Anjaan",music_derctor:"A.R.Rahuman", singer:"Aniruth")
9) db.songdetails.find({singar:"Harikaran", flim:"Minsara kannavu"},{song_name:1,_id:0})
10) db.songdetails.find({},{singar:1,_id:0})
Tuesday, June 6, 2017
26th class at 24.05.2017 and 27th class at 25.05.2017
Today is uki 26th class.
mongodb comments
** db.<collection name>.remove({age:25})
{if will delete all the documents equal to age is 25 }
** db. <collection name>.update({name:"raja"},{$set:{name:"ravi"}})
{update to raja name is changed to ravi}
RDBMS Where Clause Equivalents in MongoDB
To query the document on the basis of some condition, you can use following operations
The aggregate() Method
Syntax
Basic syntax of aggregate() method is as follows:
>db.COLLECTION_NAME.aggregate(AGGREGATE_OPERATION)
OR in MongoDB
Syntax
To query documents based on the OR condition, you need to use $or keyword. Following
is the basic syntax of OR −
AND in MongoDB
Syntax
In the find() method, if you pass multiple keys by separating them by ',' then MongoDB
treats it as AND condition. Following is the basic syntax of AND −
>db.mycol.find({key1:value1, key2:value2}).pretty()
thankyou
mongodb comments
** db.<collection name>.remove({age:25})
{if will delete all the documents equal to age is 25 }
** db. <collection name>.update({name:"raja"},{$set:{name:"ravi"}})
{update to raja name is changed to ravi}
RDBMS Where Clause Equivalents in MongoDB
To query the document on the basis of some condition, you can use following operations
The aggregate() Method
Syntax
Basic syntax of aggregate() method is as follows:
>db.COLLECTION_NAME.aggregate(AGGREGATE_OPERATION)
Syntax
To query documents based on the OR condition, you need to use $or keyword. Following
is the basic syntax of OR −
AND in MongoDB
Syntax
In the find() method, if you pass multiple keys by separating them by ',' then MongoDB
treats it as AND condition. Following is the basic syntax of AND −
>db.mycol.find({key1:value1, key2:value2}).pretty()
thankyou
Friday, June 2, 2017
25th class at 23.05.2017
Today is uki 25th class.
Today we studied MongoDB. This is database language.
some commands
** show dbs
{data bases show}
** use <database name>
{use database}
** db
{go to database}
**db.createCollection(name)
{creae new collection}
** db.<collection name>.insert({name:"dilai",age:22})
{insert data}
** db.<collecion name>.find()
{show detail}
**db.dropDatabase()
{delete database}
** show collection
{show the collections}
** db.<collection name>.drop()
{delete table}
** db.<collection name>.find({age:22},{name:1,_id:0})
{It will print the name of persons whose age is 22}
**db.<collection name>.find().pretty()
{print the details pretty formate}
I will be meet tommorw more than commands
bye......
Today we studied MongoDB. This is database language.
** show dbs
{data bases show}
** use <database name>
{use database}
** db
{go to database}
**db.createCollection(name)
{creae new collection}
** db.<collection name>.insert({name:"dilai",age:22})
{insert data}
** db.<collecion name>.find()
{show detail}
**db.dropDatabase()
{delete database}
** show collection
{show the collections}
** db.<collection name>.drop()
{delete table}
** db.<collection name>.find({age:22},{name:1,_id:0})
{It will print the name of persons whose age is 22}
**db.<collection name>.find().pretty()
{print the details pretty formate}
I will be meet tommorw more than commands
bye......
Subscribe to:
Posts (Atom)