Hướng dẫn can we connect database using css? - chúng ta có thể kết nối cơ sở dữ liệu bằng css không?

Như họ sẽ không làm, một tweet nhất định đã trôi nổi xung quanh các interwebs trong một thời gian trong tuần khác.

Hướng dẫn can we connect database using css? - chúng ta có thể kết nối cơ sở dữ liệu bằng css không?

Nhà tuyển dụng giống như:

Chúng tôi đang tìm kiếm một người có thể kết nối với cơ sở dữ liệu bằng CSS.

Đó là một thời gian dài kể từ lần cuối tôi bắt tay vào một dự án shitpost chất lượng1, thực tế đã rất lâu đến nỗi hồi đó tôi có lẽ thậm chí không có từ ngữ trong từ vựng của mình.

Cuối cùng, tôi đã được truyền cảm hứng một phần từ một dự án shitpost trước đó dựa trên dự báo của một nhà đầu tư của các nhà đầu tư của họ lên các khối 3D.2 làm tôi nhớ đến những ngày xưa của internet khi mọi thứ thật kỳ lạ.

Tôi không muốn viết một công thức ở đây vì vậy tôi sẽ dành cho bạn câu chuyện cuộc sống. Thay vào đó, tôi sẽ nói về cách tôi quản lý dự án shitpost mới của riêng mình: SQLCSS.XYZ3

Hướng dẫn can we connect database using css? - chúng ta có thể kết nối cơ sở dữ liệu bằng css không?

Như tên có thể gợi ý, đây là cách bạn kết nối với cơ sở dữ liệu bằng CSS. Thật không may, nó chỉ hoạt động trong Chrome, nhưng bạn có thể cung cấp bất kỳ cơ sở dữ liệu SQLite nào bạn thích và truy vấn nó qua CSS.

Làm thế nào nó hoạt động?

-

Một bộ API mới được gọi một cách trìu mến là Houdini4 cung cấp cho trình duyệt của bạn sức mạnh để kiểm soát CSS thông qua mô hình đối tượng của riêng mình trong JavaScript. Trong tiếng Anh, điều này có nghĩa là bạn có thể tạo các kiểu CSS tùy chỉnh, thêm thuộc tính tùy chỉnh, v.v.

Có thể tính năng lớn nhất để ra khỏi tác phẩm này là CSS Paint Worklet5, cho phép bạn 'sơn' trên một yếu tố, không giống như khung vẽ mà bạn biết và yêu thích, và có trình duyệt coi nó như một hình ảnh trong CSS. Có một số ví dụ để chơi tại Houdini.How6.

Tuy nhiên, công trình này chỉ cung cấp một tập hợp con của API công nhân và chính bối cảnh vải cũng bị tước đi rất nhiều. Kết quả thực tế của điều này là mã vẽ CSS tùy chỉnh của bạn cung cấp một hộp cát nhỏ hơn bạn có thể mong đợi.

Điều đó nghĩa là gì? Bạn không có quyền truy cập mạng, vì vậy bạn có thể hôn

DB.run('CREATE TABLE test (name TEXT NOT NULL)')
DB.run(
  'INSERT INTO test VALUES (?), (?), (?), (?)',
  ['A', 'B', 'C', 'D']
)
2 và
DB.run('CREATE TABLE test (name TEXT NOT NULL)')
DB.run(
  'INSERT INTO test VALUES (?), (?), (?), (?)',
  ['A', 'B', 'C', 'D']
)
3 Tạm biệt. Bạn không có chức năng
DB.run('CREATE TABLE test (name TEXT NOT NULL)')
DB.run(
  'INSERT INTO test VALUES (?), (?), (?), (?)',
  ['A', 'B', 'C', 'D']
)
4 trên bối cảnh sơn. Nhiều API JS khác cũng đã biến mất, chỉ trong trường hợp bạn đang hy vọng giải quyết một số vấn đề đó.

Không cần phải lo lắng, mặc dù. Tất cả không bị mất. Hãy chia nhỏ điều này thành các bước.

-

1. Thiết lập cơ sở dữ liệu

Đây phải là bước đầu tiên, để hiểu nếu một bằng chứng về khái niệm là có thể.

Có một thư viện gọi là

DB.run('CREATE TABLE test (name TEXT NOT NULL)')
DB.run(
  'INSERT INTO test VALUES (?), (?), (?), (?)',
  ['A', 'B', 'C', 'D']
)
57. Nó hoàn toàn theo nghĩa đen là một phiên bản của sqlite được biên soạn thành Webassugging và ASM.JS cũ thông qua EMScripten. Thật không may, chúng tôi không thể sử dụng phiên bản WASM, vì nó phải lấy một nhị phân qua mạng. Phiên bản ASM không có giới hạn này mặc dù tất cả các mã có sẵn trong một mô -đun duy nhất.

Mặc dù Paintworklet hạn chế quyền truy cập mạng bên trong công nhân, bạn vẫn cho phép mã

DB.run('CREATE TABLE test (name TEXT NOT NULL)')
DB.run(
  'INSERT INTO test VALUES (?), (?), (?), (?)',
  ['A', 'B', 'C', 'D']
)
6 miễn là nó là mô -đun ES6. Điều đó có nghĩa là tệp phải có câu lệnh
DB.run('CREATE TABLE test (name TEXT NOT NULL)')
DB.run(
  'INSERT INTO test VALUES (?), (?), (?), (?)',
  ['A', 'B', 'C', 'D']
)
7 ở đâu đó bên trong nó. Thật không may, sql.js không có ES6 chỉ xây dựng vì vậy tôi đã tự sửa đổi tập lệnh để thực hiện công việc này.

Bây giờ cho khoảnh khắc của sự thật: Tôi có thể thiết lập cơ sở dữ liệu bên trong công việc của mình không?

const SQL = await initSqlJs({
  locateFile: file => `./${file}`,
});

const DB = new SQL.Database();

Thành công! Không có lỗi. Nhưng cũng không có dữ liệu, vì vậy hãy sửa nó.

2. Truy vấn cơ sở dữ liệu

Điều dễ nhất cần làm khi bắt đầu là thiết lập một số dữ liệu giả. SQL.JS có một vài chức năng để làm chính xác điều đó.

DB.run('CREATE TABLE test (name TEXT NOT NULL)')
DB.run(
  'INSERT INTO test VALUES (?), (?), (?), (?)',
  ['A', 'B', 'C', 'D']
)

Tôi đã có bảng thử nghiệm của mình với một số giá trị trong đó bây giờ. Tôi sẽ có thể truy vấn điều này và lấy lại các giá trị đó, mặc dù tôi không chắc kết quả sẽ được cấu trúc như thế nào.

const result = DB.exec('SELECT * FROM test')
console.log(result)

Kết quả là có, như mong đợi. Thật tuyệt khi thực sự làm cho kết quả này mặc dù.

3. Kết quả kết quả, cách dễ dàng

Tôi cho rằng điều này sẽ giống như viết văn bản cho một bức tranh. Làm thế nào khó khăn, phải không?

class SqlDB {
  async paint(ctx, geom, properties) {
    const result = DB.exec('SELECT * FROM test');
    ctx.font = '32px monospace';
    ctx.drawText(JSON.stringify(result), 0, 0, geom.width);
  }
}

Không, điều đó sẽ quá đơn giản. Bối cảnh ở đây không giống như ngữ cảnh bạn có thể nhận được cho một phần tử canvas, nó chỉ cung cấp một tập hợp con về chức năng.

Tất nhiên, nó vẫn có thể vẽ các đường dẫn và đường cong, vì vậy việc thiếu API thuận tiện là một trở ngại nhưng không phải là một giao dịch.

4. Tạo văn bản mà không có API văn bản

May mắn thay, một thư viện có tên OpenType.js8 cung cấp hy vọng về một giải pháp. Nó có thể phân tích một tệp phông chữ và sau đó, đưa ra một chuỗi văn bản, tạo các chữ cái của từng ký tự. Kết quả thực tế của hoạt động này là một đối tượng đường dẫn đại diện cho chuỗi, sau đó có thể đưa vào bối cảnh của tôi.

Tôi không phải sửa đổi thư viện OpenType để nhập nó lần này, vì nó đã có sẵn từ JSPM9. Nếu bạn cung cấp cho JSPM một gói NPM, nó sẽ tự động tạo mô -đun ES6 mà bạn có thể nhập trực tiếp vào trình duyệt của mình. Điều này thật tuyệt vời vì tôi thực sự không muốn phải làm việc với một công cụ bó vì lợi ích của một dự án trò đùa.

import opentype from 'https://ga.jspm.io/npm:/dist/opentype.module.js'

opentype.load('fonts/firasans.otf')

Mặc dù vậy, một vấn đề ở đây - nó muốn tải một phông chữ qua mạng và tôi không thể làm điều đó! Gah, lại thất vọng!

…Hoặc là tôi? Nó cũng có một phương pháp

DB.run('CREATE TABLE test (name TEXT NOT NULL)')
DB.run(
  'INSERT INTO test VALUES (?), (?), (?), (?)',
  ['A', 'B', 'C', 'D']
)
8 chấp nhận bộ đệm mảng. Tôi sẽ chỉ Base64 mã hóa phông chữ sau đó và giải mã nó trong mô -đun của tôi.

import opentype from 'https://ga.jspm.io/npm:/dist/opentype.module.js'
import base64 from 'https://ga.jspm.io/npm:/index.js'

const font = 'T1RUTwAKAIAAAwA ... 3 days later ... wAYABkAGgAbABwAIAKM'

export default opentype.parse(base64.toByteArray(font).buffer)

Tôi đã nói với bạn rằng công việc cũng không có API để xử lý chuỗi Base64? Thậm chí không

DB.run('CREATE TABLE test (name TEXT NOT NULL)')
DB.run(
  'INSERT INTO test VALUES (?), (?), (?), (?)',
  ['A', 'B', 'C', 'D']
)
9 và
const result = DB.exec('SELECT * FROM test')
console.log(result)
0? Tôi cũng phải tìm một triển khai JS đơn giản cho điều đó.

Tôi đặt mã này vào tệp của riêng mình bởi vì nó không phải là công thái học rất nhiều để phải làm việc xung quanh một chuỗi phông chữ được mã hóa 200kb cùng với phần còn lại của mã.

Và đó là cách tôi lạm dụng một mô -đun ES để tải phông chữ của mình.

5. Kết quả kết quả, cách dễ dàng khác

Thư viện OpenType thực hiện tất cả các công việc nặng nề từ bây giờ, vì vậy tất cả những gì tôi cần làm là một chút toán học để sắp xếp mọi thứ một cách độc đáo.

import font from './font.js'

const SQL = await initSqlJs({
  locateFile: file => `./${file}`,
});

const DB = new SQL.Database();

DB.run('CREATE TABLE test (name TEXT NOT NULL)')
DB.run(
  'INSERT INTO test VALUES (?), (?), (?), (?)',
  ['A', 'B', 'C', 'D']
)

class SqlDB {
  async paint(ctx, geom, properties) {
    const query = DB.exec('SELECT * FROM test')
    const result = query[0].values.join(', ')

    const size = 48
    const width = font.getAdvanceWidth(queryResults, size)
    const point = {
      x: (geom.width / 2) - (width / 2),
      y: geom.height / 2
    }

    const path = font.getPath(result, point.x, point.y, size)
    path.draw(ctx)
  }
}

registerPaint('sql-db', SqlDb)

Tốt hơn là đã làm một số HTML và CSS để xem những gì đang xảy ra.

<html>
  <head>
    <script>
      CSS.paintWorklet.addModule('./cssdb.js')
    script>
    <style>
      main {
        width: 100vw;
        height: 100vh;
        background: paint(sql-db);
      }
    style>
  head>
  <body>
    <main>main>
  body>
html>

Nó hoạt động, nhưng không có đủ CSS ở đây và truy vấn được mã hóa cứng.

6. Truy vấn qua CSS

Sẽ tốt hơn nếu bạn phải sử dụng CSS để truy vấn cơ sở dữ liệu. Trên thực tế, đó là cách duy nhất chúng ta có thể giao tiếp với nhân viên sơn từ bên ngoài bối cảnh của nó vì không có API nhắn tin như với những người lao động bình thường.

Đối với điều này, một thuộc tính CSS tùy chỉnh là bắt buộc. Xác định

const result = DB.exec('SELECT * FROM test')
console.log(result)
1 có lợi ích của việc đăng ký các thay đổi đối với tài sản đó, do đó, điều này sẽ được đổi lại nếu giá trị của tài sản đó thay đổi. Không cần phải tự mình thiết lập bất kỳ người nghe.

class SqlDb {
  static get inputProperties() {
    return [
      '--sql-query',
    ]
  }

  async paint(ctx, geom, properties) {
    
    const query = DB.exec(String(properties.get('--sql-query')))
  }
}

Các thuộc tính CSS đó được gọi là thuộc tính gõ, nhưng về cơ bản chúng được đóng hộp trong một lớp

const result = DB.exec('SELECT * FROM test')
console.log(result)
2 đặc biệt không hữu ích lắm. Vì vậy, bạn phải chuyển đổi thủ công nó thành một chuỗi hoặc một số hoặc một số như vậy để sử dụng nó, như trên.

Chỉ là một điều chỉnh nhanh đến CSS bây giờ.

main {
  // ...
  --sql-query: SELECT name FROM test;
}

Báo giá được cố tình bỏ qua ở đây vì nếu không tôi sẽ phải xóa chúng khỏi chuỗi trước khi chuyển nó đến cơ sở dữ liệu. Điều đó nói rằng, điều này hoạt động tốt!

Nhiệm vụ đã hoàn thành!


Nếu bạn đã chơi với SQLCSS.XYZ, bạn sẽ nhận thấy rằng tôi đã không giải quyết cho điều đó. Sau khi tái cấu trúc, một vài thay đổi đã được thực hiện.

7. BYODB

Mã hóa một lược đồ cơ sở dữ liệu và, tốt, dữ liệu thực tế, loại hút. Nó chứng minh khái niệm nhưng chắc chắn chúng ta có thể làm tốt hơn thế.

Sẽ thật tuyệt nếu bạn có thể truy vấn bất kỳ cơ sở dữ liệu nào bạn thích, miễn là bạn có tệp cơ sở dữ liệu tiện dụng. Tôi sẽ chỉ cần đọc tệp đó và base64 mã hóa nó, giống như tôi đã làm với tệp phông chữ.

DB.run('CREATE TABLE test (name TEXT NOT NULL)')
DB.run(
  'INSERT INTO test VALUES (?), (?), (?), (?)',
  ['A', 'B', 'C', 'D']
)
0

Tôi đã tạo một thuộc tính CSS bổ sung cho điều đó, nơi bạn có thể cung cấp cơ sở dữ liệu SQLite của mình dưới dạng URI dữ liệu được mã hóa cơ sở64. URI dữ liệu về cơ bản chỉ để hiển thị và để đảm bảo nó hợp lệ cho DOM; Tôi sẽ phân tích những thứ đó ra về phía công nhân.

Bước cuối cùng là giúp truy vấn dễ dàng hơn, bởi vì nếu không bạn phải đi vào trình gỡ lỗi của mình để thao tác CSS trên một phần tử.

8. Viết các truy vấn của riêng bạn

Đây có thể là phần ít phức tạp nhất của dự án. Thuộc tính tùy chỉnh có một chút vấn đề với các dấu chấm phẩy và SQLite không quan tâm nếu dấu chấm phẩy kéo dài, vì vậy điều dễ nhất phải làm là xóa nó nếu nó được tìm thấy trong đầu vào.

DB.run('CREATE TABLE test (name TEXT NOT NULL)')
DB.run(
  'INSERT INTO test VALUES (?), (?), (?), (?)',
  ['A', 'B', 'C', 'D']
)
1

Bây giờ bạn có thể sử dụng CSS để nhập và duyệt cơ sở dữ liệu của riêng bạn!


Một điều tôi đã bỏ qua tất cả những điều này là làm thế nào để hiển thị kết quả độc đáo khi có rất nhiều trong số chúng và chúng cần được chia thành các dòng riêng biệt. Điều đó không thực sự liên quan đến việc kết nối với cơ sở dữ liệu thông qua CSS, vì vậy tôi đã quyết định nó không xứng đáng, nhưng mã hoàn toàn có sẵn trên GIT nếu bạn muốn đưa khái niệm lố bịch này hơn nữa.10

Bạn có thể kết nối với cơ sở dữ liệu với CSS không?

Viết các truy vấn của riêng bạn Bây giờ bạn có thể sử dụng CSS để nhập và duyệt cơ sở dữ liệu của riêng bạn!you can use CSS to import and browse your own database!

Tôi có thể sử dụng MySQL trong HTML và CSS không?

HTML là ngôn ngữ đánh dấu và CSS là các kiểu được hiển thị thành HTML, chúng không thể kết nối với MySQL DB hoặc bất kỳ DB nào về vấn đề đó.Bạn cần một ngôn ngữ máy chủ để kết nối với cơ sở dữ liệu.Các lựa chọn thay thế khác cho PHP là Node JS, Python, v.v.they cant connect with MySQL db or any db in that regard. You need a server language to connect with the database. Other alternatives to php are Node JS, Python etc..

Chúng ta có thể kết nối HTML với cơ sở dữ liệu không?

Câu trả lời này phác thảo cách sử dụng PHP để kết nối biểu mẫu HTML với cơ sở dữ liệu MySQL.Chúng tôi sẽ sử dụng XAMPP làm phần mềm máy chủ để tạo cơ sở dữ liệu và chạy PHP.Chúng tôi sẽ sử dụng các bước dưới đây để tạo kết nối: thiết lập XAMPP và định cấu hình môi trường phát triển PHP.

Cơ sở dữ liệu CSS là gì?

CSSDB là một danh sách toàn diện các tính năng CSS và vị trí của chúng trong quá trình trở thành tiêu chuẩn web được triển khai.a comprehensive list of CSS features and their positions in the process of becoming implemented web standards.